这个 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) ". ";
}
显示列表,但我不知道如何像通常的列表一样对齐“数字”。 请参阅点对齐问题https://jsfiddle.net/0yb7aee8/
在默认列表中,数字位于
ul/ol
的填充中。
你可以做一些类似的东西。
.listaEspecial {
list-style: none;
list-style-position: outside;
padding-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/ol
的填充是40px,我使用了55px(45px宽度+10px填充:before
,因为数字较长。
看看默认列表中也存在数字较长的问题,40px 对于 gamma 和 delta 项目来说太短了。