如何对齐自定义计数器列表？

Question

这个HTML列表（已订购但我的特殊订单），

<ul class="custom">
  <li value="II">Alpha</li>
  <li value="III">Beta</li>
  <li value="☸" >Gamma</li>
  <li value="MXX">Delta</li>
</ul>

和CSS

.custom { list-style: none;  }
.custom li:before {
    content:  attr(value) ". ";
 }

显示列表，但我看不到如何像通常的列表那样对齐 "numbers"。在 https://jsfiddle.net/0yb7aee8/

查看点对齐问题

Answer 1

在默认列表中，数字在 ul/ols 内填充。

你可以让圣。类似这样。

.listaEspecial {
  list-style: none;
  list-style-position: outside;
  padding-left: 0;
  margin-left: 0;
}
.listaEspecial li:before {
    content:  attr(value) ". ";
    text-align: right;
    display: inline-block; 
    width: 45px; 
    padding-right: 10px;
 }

Build-in list:
<ul class="listaEspecial">
  <li value="II">Alpha</li>
  <li value="III">Beta</li>
  <li value="☸" >Gamma</li>
  <li value="MXX">Delta</li>
</ul>

<hr/>
Standard list (better spacing and point-align):
<ol type="I" start="2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="100000" >Gamma</li>
  <li>Delta</li>
</ol>

ul/ols padding 是 40px，我使用 55px（45px 宽度 + 10px padding for :before 因为数字更长。

看看在默认列表中，较长的数字也有问题，40px 对于 gamma 和 delta 项目来说太短了。

如何对齐自定义计数器列表？

How to align a list of custom-counters?

css

text-align

list