右对齐列表项中的某些文本 [英] Right align some text within a list item

问题描述

我有一个嵌套的无序列表，其左侧有主要内容，并且我想添加右侧浮动的选项，以使它们在右侧对齐，而不管缩进级别如何。

I have a nested unordered list which has main content on the left, and I would like to add options which are floated right, such that they are aligned on the right regardless of the level of indentation.

<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：

I have the following css:

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

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

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

使用此选项时，选项跨度对齐到右侧，但是1在预期线以下。

When this is used however the options span is aligned to the right, but 1 line below the expected line.

我怎样才能让选项跨度与列表项目一致？

How can I get the options span to line up with the list item?

TIA，
Adam

TIA, Adam

推荐答案

不用浮动，您可能想尝试绝对定位。 b
$ b

Instead of floating, you may want to try absolute positioning.

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

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

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

这篇关于右对齐列表项中的某些文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！