有序列表的默认低字母列表类型使用点“。”。有没有办法像a)... b)那样使用右括号?
Answers:
这是一个整洁的解决方案。(老实说,我对此感到惊讶。)CSS有一个叫做counters的东西,您可以在其中设置每个标题的自动章节编号。进行一些修改可以为您提供以下内容;您需要自己整理填充等。
ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list, lower-alpha) ") ";
counter-increment: list;
}
<span>custom list style type (v1):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>
适用于所有现代浏览器和IE9 +(可能是IE8,但可能有问题)。
更新:我添加了子选择器,以防止嵌套列表采用父样式。trejder在注释中也很不错,因为列表项的对齐方式也很混乱。456bereastreet上的一篇文章提供了一个很好的解决方案,其中涉及绝对定位计数器。
ol {
counter-reset: list;
}
ol > li {
list-style: none;
position: relative;
}
ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em;
}
<span>custom list style type (v2):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>
, lower-alpha
。因此,content
值应为counter(list) ") ";
基于DisgruntledGoat的答案,我根据需要扩展了它以支持子列表和样式。在这里分享它,以防有人帮忙。
https://jsfiddle.net/0a8992b9/输出:
(i)first roman
(a)first alpha
(b)second alpha
(c)third alpha
(d)fourth alpha
(ii)second roman
(iii)third roman
(a)first alpha
(b)second alpha
text-indent
的li
水平
将其添加到CSS中可获得一些有趣的结果。它很近,但是没有雪茄。
li:before {
display: inline-block;
width: 1em;
position: relative;
left: -0.5em;
content: ')'
}
-----编辑为在注释中包含Iazel的解决方案-----
我已经完善了您的解决方案:
li {
position: relative;
}
li:before {
display: inline-block;
width: 7px;
position: absolute;
left: -12px;
content: ')';
background-color: #FFF;
text-align: center;
}
背景和position: absolute
窍门!
li { position: relative; } li:before { display: inline-block; width: 7px; position: absolute; left: -12px; content: ')'; background-color: #FFF; text-align: center; }
背景和职位:绝招!:)
这适用于IE7,FF3.6,Opera 9.64和Chrome 6.0.4:
<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number three;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number six;</li>
</ol>
这是内联式的,因为它是为电子邮件编码的,但是要点是跨度充当内容块,并将括号放入负的左侧区域,因此与列表编号对齐。这两个边距是为了补偿IE7和FF的差异
希望这可以帮助。
display:inline-block;
吗?