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

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