我有一个文本需要看起来像这样:
这个问题,当我使用bootstrap 3这样的常见类
时 <ul class="list-unstyled">
<li>Item</li>
<li>Item</li>
</ul>
这个数字在li里面,我不需要那个,我需要在bootstrap 3中分离那个数字,看图片,但是要保持语义在<li>
元素中保持正常顺序。
这是我现在所做的工作 https://jsfiddle.net/DTcHh/7187/
编辑更新完整答案
CSS ol.list-numbered { 反重置:分段; }
ol.list-numbered {
counter-increment: section 3;
list-style: none;
}
ol.list-numbered li::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
margin-left: -30px;
width: 30px;
display: inline-block;
}
HTML
<ol class="list-numbered">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis nisi vitae est porta aliquet. Nullam lacinia ornare diam, in lobortis massa eleifend a. Phasellus tempor lacus ligula.. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis nisi vitae est porta aliquet. Nullam lacinia ornare diam, in lobortis massa eleifend a. Phasellus tempor lacus ligula.. </li>
</ol>
答案 0 :(得分:2)
从列表中删除类(我们希望显示list-style
,而不是将它们隐藏为Bootstrap),并使用有序列表<ol>
而不是无序<ul>
。
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
<ol>
<li>a
<ol>
<li>b
<li>c
</ol>
<li>d
</ol>
答案 1 :(得分:1)
我使用你原来的小提琴修改了Panther Answer来展示你如何用你所说的做你想做的事情:
ol.list-unstyled {
counter-reset:section 3;
}
ol.list-unstyled > li {
list-style:none;
}
ol.list-numbered {
counter-reset:subsection;
}
ol.list-numbered li::before {
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
在此Fiddle中演示,已更新为有效的HTML5标记。
答案 2 :(得分:-1)
可以像这样https://jsfiddle.net/DTcHh/7193/
在li里面添加span.list-unstyled{
padding-left: 25px;
}
.list-unstyled span{
margin-left: -25px;
}