css - 右对齐 CSS 有序列表中的一些文本

Question

我正在尝试创建一个带编号的字符串列表，我需要在其中向右浮动的字符串末尾添加一些值。我发现了以下问题 ( Right align some text within a list item )，这一直有效，直到文本不够大而无法强制换行。向右浮动的文字与文字重叠。

精简 HTML:

<div class="container">
  <ol class="top3">
    <li>Short name<span class="top3-value">10%</span></li>
    <li>Very very long long long name<span class="top3-value">12%</span></li>
    <li>Very very long long longlonglongname<span class="top3-value">12%</span></li>
  </ol>
</div>

容器、top3 和 top3-value 类定义为(使用 LESS 语法):

.container {
  width: 175px;
}

ol.top3 {
  margin: 0;
  padding: 0;
  counter-reset: item;
  list-style: none;
  border-top: 1px solid #AEAEAE;

  li {
    position: relative;
    margin: 0 0 6px 0;
    padding: 10px 8px 10px 2em;
    list-style: none;
    border-bottom: 1px solid #AEAEAE;

    span.top3-value {
      padding-left: 1em;
      position: absolute;
      right: 0;
      font-weight: 700;
    }
  }
}

请看这个例子:http://codepen.io/kdbruin/pen/xVyEya

设置了容器的宽度，所以问题就显现出来了。在我的网页中，宽度可以变化并由页面上的其他元素决定。

我已经尝试将 display: block 添加到 top3-value 类，但这将始终强制将值置于文本下方，即使有足够的空间将其放在右侧也是如此。此外，这将通过分隔线显示值。

当使用 float: right 而不是值的绝对定位时，会显示类似的结果。

有什么建议吗？

Answer 1

如果你能改变容器类的宽度，你可以放

width:auto;

因此它会一直扩展到屏幕末尾。所有动态值都可以容纳在这里。