html - 右对齐列表项中的某些文本

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 代码，您可以在第一个 span 中包含“Item 1”，并且：

• 将其浮动到左侧（仍然浮动 .options 到右侧）
• display: inline-block在 span 和 .options 上都使用text-align: right，而不是 floats（虽然与 Fx2 不兼容，并且仅适用于 IE6/7，因为 span 默认情况下是内联元素。不适用于 div）