HTML:如何对齐列表中的多个元素？

Question

我有一个嵌套列表，我想为每个条目附加一些按钮。但是对齐方式非常有线。参见 JSFIDDLE example here .

基本上我希望所有按钮的位置都像button1。我该怎么办？

Answer 1

您可以向 li 元素添加 clear right，或者如果您需要对位置进行更精细的调整，请尝试以下操作:

HTML(纠正你的)

<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