时间戳

首页 > 解决方案 > 我们如何通过使用伪元素来实现类似列表的行为

html - 我们如何通过使用伪元素来实现类似列表的行为

问题描述

因为我们在 html 中支持的列表装饰器类型非常少。像圆，十进制圆盘等。如果我们想要自定义列表装饰器，那么我们必须使用伪元素。前任

 (a). Hi list item
 (b). hi there

伪元素的问题是当你的伪元素的计数器值达到下一位时，内容没有正确对齐。前任。对于数字计数器，最多 9 个内容对齐，但当 10 个出现时，列表项内容向右移动。同样对于 100、1000 ...

为了解决这个问题，我使用了带有文本对齐的显示内联块。

  width: 30px;
  text-align: right;
  margin-right: 10px;
  display: inline-block;

另一个问题是，当列表项内容溢出到下一行时，下一行从伪元素计数器开始的相同位置开始。

为了解决这个问题，我必须在 em 中使用 text-indent。但这也不是一个万无一失的解决方案。当计数器值和列表项文本都增加时，会观察到轻微的错位。

我在这里有几个问题。

如果我需要放置一些代码片段或未对齐的图像快照，请告诉我。

标签： htmlcsshtml-listspseudo-element

解决方案

好的，我有这个解决方案，使用table. 所以你不需要使用边距或填充。也用于造型 li( x ) .使用它li:before content

ul {
    counter-reset: list;
    width:20%;
    display: table;
}
ul > li {
    list-style: none;
     display: table-row;
}
ul > li:before {
    content: "( "counter(list, lower-alpha) " ). ";
    counter-increment: list;
    display: table-cell; 
    text-align: right;
    width:100%;
}
<ul>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
</ul>

推荐阅读