Question

我有一个嵌套列表，我想在每个条目上附加一些按钮。但是对齐是非常有线的。请参阅JSFIDDLE example here。

基本上我希望所有按钮的位置都与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;}

see fiddle

Answer 2

添加到您的CSS：

li { clear: right; }

这也有效：

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

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

Answer 3

对齐是非常有线的，因为你正在使用＆＃34; float：right＆＃34;在css。删除它然后它将工作，你可以使用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;}

*你可以使用位置相对

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

3 个答案:

HTML代码

CSS