htmlbuttonsequence-alignment

Write 2 button in HTML DOM on the right side of the screen from left to right

I wrote my DOM structure like :

 <button style="float:right">button1</button>
 <button style="float:right">button2</button>
 <button style="float:left">button3</button>
 <button style="float:left">button4</button>

and it will display like : https://jsfiddle.net/ospv6vn8/3/

button3 button4 button2 button1

but i want to render them like :

button4 button3 button1 button2

I can't modify my DOM structure, yes I can edit styles to get the desired look.

Solution

  • EDITED: THIS WORKS! You could have the first ones use px instead of float and have button 3 float center, like this:

    <button style="position: absolute; right: 61px;">button1</button>
<button style="position: absolute; right: 0px;">button2</button>
<button style="float:center;">button3</button>
<button style="float:left;">button4</button>

    (always have button1 61px more to the right than button2)