HTML：如何在列表中對齊多個元素？

Question

我有一個嵌套列表，我想在每個條目上附加一些按鈕。 但是對齊方式非常有線。 請參閱此處的JSFIDDLE示例 。

基本上，我希望所有按鈕的位置都與button1一樣。 我該怎么辦？

Answer 1

您可以為li元素添加明確的權限，或者如果您需要對位置進行更多的微調，請嘗試以下操作：

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;}

看小提琴

Answer 2

添加到您的CSS：

li { clear: right; }

這也將起作用：

.right {
    float: right;
    clear: right;
}

更新的JSFiddle： http : //jsfiddle.net/1ha04a3r/5/

Answer 3

由於您在CSS中使用“ float：right”，因此對齊方式非常有線。 刪除它，它將起作用，並且您可以使用css類來修改列表的填充和位置。

HTML代碼

 <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;}

*您可以使用相對位置