Question

我有一个动态生成的有序列表，最多包含105个项目。我使用li来设置li数字：之前，一切都很好，但是一旦列表达到三位数，数字就会开始与列表项重叠。这掩盖了李本身的数量和部分的结束。我想要做的是让li数字与最后一位数字对齐而不是第一位数字。我不确定如何问这个，这可能就是我找不到答案的原因。示例如下：

默认情况下，列表项目编号如何显示：

1.
5.
10.
50.
100.

我想要实现的目标：

  1.
  5.
 10.
 50.
100.

我已尝试添加

direction: rtl

和

text-align-last: right

到li：之前，但似乎都没有做任何事情。

感谢您的帮助，对不起，如果这是一个愚蠢的问题！

编辑：这是我的CSS。谢谢！

 li:before {
   text-shadow: 2px 2px 4px #000000;
   margin-left:-20px;
   margin-top:25px;
   content: counter(item);
   color: white;
   display: inline-block;
   font-size:2rem;
   direction: rtl;
   text-align-last: right;
 }

Answer 1

你能发布更多你的html和css，这样我们才能准确理解你现在正在做什么。

默认情况下，有序列表会右对齐项目编号。我已经实现了我认为你的目标：

ol li {
  /* Style the list number */
  color: red;
  font-size: 20px;
  font-weight: bold;
}

ol li span {
  /* Style the list item text */
  color: green;
  font-size: 14px;
  font-weight: normal;
}

<ol>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
  <li><span>Item text</span></li>
</ol>

按最后一位数列出项目编号......？

1 个答案: