Question

因为我们在html中支持很少的List装饰器支持。像圆圈，十进制圆盘等如果我们想拥有自定义列表装饰器，那么我们必须使用伪元素。前

 (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。但这也不是一个万无一失的解决方案。当计数器值和列表项文本都增加时，观察到轻微的未对准。

我在这里有几个问题。

1. 正确对齐伪元素display-inline block是唯一的选择吗？
1. 如何使用伪选择器实现类似行为的列表。
1. 我们可以使用所有其他可能的CSS样式来对齐像list这样的内容。

如果我需要提供一些不对齐的代码段或图像快照，请告诉我。

Answer 1

好的我有这个解决方案，使用table。所以你不需要使用边距或填充。另外，对于( x ) .样式li，请在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>

Answer 2

根据计数器值，您可以将position: absolute用于text-align: right的计数器值和一些width值。

此外，您需要向padding-left元素提供一些<li>以对齐计数器值。

＆＃13;

ul {
  list-style: none;
  counter-reset: list;
  padding: 0;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

li:before {
  content: counter(list);
  counter-increment: list;
  position: absolute;
  left: -20px;
  width: 30px;
  text-align: right;
  color: red;
}

＆＃13;

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sapien risus. Ut eget congue est.</li>
</ul>

＆＃13;

我们如何通过使用伪元素

2 个答案: