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

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

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

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

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