HTML + CSS:不带句点的有序列表?
我认为这个问题的答案是否定的……但是,有谁知道用HTML / CSS的方法来创建有序列表,而数字后面没有句点? 或者,还是指定分隔符?
理想情况下,我不想为每个数字使用不同的类来制作列表样式的图像,但是到目前为止,我已经能够想到的就是这一切……这似乎非常语义化。
IE浏览器:
Default Style:
1. ______
2. ______
3. ______
Desired Style:
1 ______
2 ______
3 ______
Alternate Style:
1) ______
2) ______
3) ______
5个解决方案
81 votes
仅使用CSS(2.1)完全可以做到:
ol.custom {
list-style-type: none;
margin-left: 0;
}
ol.custom > li {
counter-increment: customlistcounter;
}
ol.custom > li:before {
content: counter(customlistcounter) " ";
font-weight: bold;
float: left;
width: 3em;
}
ol.custom:first-child {
counter-reset: customlistcounter;
}
请记住,此解决方案依赖于:before伪选择器,因此某些较旧的浏览器(尤其是IE6和IE7)不会呈现生成的数字。 对于这些浏览器,您需要添加一条额外的CSS规则,以仅使用常规列表样式的方式针对他们:
ol.custom {
*list-style-type: decimal; /* targets IE6 and IE7 only */
}
Chris answered 2020-02-02T04:04:00Z
7 votes
这是解决方案
在HTML中编号嵌套的有序列表
您所要做的就是在此处进行一些更改
ol li:before {
content: counter(level1) " "; /*Instead of ". " */
counter-increment: level1;
}
^^
Hatake Kakashi answered 2020-02-02T04:04:33Z
3 votes
我只是找到了一种解决方法,适用于您只想删除点的情况。 这不是有史以来最好的解决方案,但是仅使用CSS即可完成,并且可以在每种浏览器中使用。 缺点是您需要将LI中的textnode包装到另一个标签(之类)中。 就我自己而言,
- 用作链接列表,因此我可以使用我的
我使用的CSS:
ol li a {
float: right;
margin: 8px 0px 0px -13px; /* collapses and dots */
padding-left: 10px; /* gives back some space between digit and text beginning */
position: relative; z-index: 10; /* make the appear ABOVE the dots */
background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */
}
neemzy answered 2020-02-02T04:04:58Z
1 votes
您可以稍后使用jQuery添加数字:
$("ul").each(function() {
$(this).find("li").each(function(index) {
$(this)
.css("list-style-type", "none")
.prepend("
})
})
在这里尝试示例。
此处提供有关jQuery的更多信息。
ariel answered 2020-02-02T04:05:26Z
0 votes
这是在li内不增加计数和内联标签的最简单解决方案:
ol {list-style-position: inside; overflow: hidden; direction: rtl;}
li {position: relative; left: -15px; text-align: left; letter-spacing: 5px;}
user3051730 answered 2020-02-02T04:05:46Z