Question

我有一个嵌套的无序列表，其左侧有主要内容，我想添加右侧浮动的选项，这样它们就会在右侧对齐，而不管缩进程度如何。

<ul>
<li> Item 1 <span class='options'> link </span> </li>
<li> Item 2 <span class='options'> link </span>
  <ul>
    <li>Item 3 <span class='options'> link </span> </li>
  </ul>
</li>
</ul>

我有以下css：

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width: 400px;
}

.options {
    float: right;
    width: 50px;
}

如果使用此选项，则选项范围与右侧对齐，但在预期线下方为1行。

如何让选项范围与列表项对齐？

TIA，亚当

Answer 1

您可能想尝试绝对定位而不是浮动。

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width: 400px;
    position: relative;
}

.options {
    width: 50px;
    position: absolute;
    right: 0px;
}

Answer 2

使用此CSS：

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width:400px;
}
.options {
    float: right;
    width: 50px;
}
li li { width:385px}

不幸的是，这需要您定义宽度减去填充。根据您的灵活性，这将有效。在Chrome 3.0中测试过。

Answer 3

如果修改HTML代码没问题，您可以在第一个范围中包含“第1项”并且：

将其浮动到左侧（仍然是浮动的.options到右侧）
在.options上的span和display: inline-block上使用text-align: right，而不是浮点数（不兼容Fx2，只能在IE6 / 7中工作，因为默认情况下span是内联元素。不会与div合作）

右对齐列表项中的一些文本

3 个答案: