HTML: How to align multiple elements within a list? - html

Question

I have a nested list, and I want to attach some buttons to each entry. But the alignment is very wired. See JSFIDDLE example here.
Basically I want all buttons positioned just like button1. What should I do?

Answer 1

you can add clear right to your li element or if you need more fine tuning for position, try this:
HTML (to correct yours)
<ul>
<li>test <button class='right'>button1</button></li>
<li>test <button class='right'>button2</button></li>
<li> <ul>
<li>test <button class='right'>button3</button></li>
<li>test <button class='right'>button4</button></li>
</ul></li>
<li><ul>
<li>test <button class='right'>button6</button></li>
<li>test <button class='right'>button6</button></li>
</ul>
</li>
</ul>
CSS
.right {
position:absolute; right:10px; top:2px;
}
li{ width:100%; position:relative; padding:5px 0;}
see fiddle

Answer 2

Add to your CSS:
li { clear: right; }
This will also work:
.right {
float: right;
clear: right;
}
Updated JSFiddle: http://jsfiddle.net/1ha04a3r/5/

Answer 3

the alignment is very wired because you are using "float:right" in css. remove it then it will work and you can use the css class to modify your list padding and position.
HTML Code
<ul>
<li>test <button class='right'>button1</button></li>
<li>test <button class='right'>button2</button></li>
<ul>
<li>test <button class='right'>button3</button></li>
<li>test <button class='right'>button4</button></li>
<ul>
<li>test <button class='right'>button6</button></li>
<li>test <button class='right'>button6</button></li>
</ul>
</ul>
</ul>
css
li{ width:100%; padding:2px auto;}
*you can use position relative