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

时间:2017-12-12 20:05:28

标签: css list text-align

此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) ". ";
 }

显示列表,但我看不到如何对齐&#34;数字&#34;像往常一样。 请参阅https://jsfiddle.net/0yb7aee8/

处的点对齐问题

1 个答案:

答案 0 :(得分:3)

在默认列表中,该号码位于ul/ol填充。

你可以制作圣。像这样。

&#13;
&#13;
.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;
 }
&#13;
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>
&#13;
&#13;
&#13;

ul/ol的填充为40px,我使用55px(宽度为45px + {1}}填充10px,因为数量较长。

在默认列表中看一下,也存在数字越长的问题,对于gamma和delta项,40px太短。