HTML + CSS：没有句号的有序列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5945161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML + CSS: Ordered List without the Period?
提问by Andrew
I think the answer to this question is no... but does anyone know of a an HTML/CSS way to create an ordered list without a period after the numbers? Or, alternatively, to specify the separator character?
我认为这个问题的答案是否定的......但是有没有人知道一种 HTML/CSS 方法来创建一个在数字后没有句点的有序列表？或者，或者，指定分隔符？
Ideally I don't want to do list-style-image with a different class for each number, but that's all I've been able to think of so far... That seems terribly unsemantic.
理想情况下，我不想为每个数字使用不同的类来做列表样式图像，但这就是我迄今为止所能想到的......这似乎非常没有语义。
IE:
IE：
Default Style:
1. ______
2. ______
3. ______
Desired Style:
1 ______
2 ______
3 ______
Alternate Style:
1) ______
2) ______
3) ______
回答by Chris
This is perfectly possible to do with just CSS (2.1):
这完全可以用 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;
}
Keep in mind that this solution relies on the :before pseudo-selector, so some older browsers -- IE6 and IE7 in particular -- won't render the generated numbers. For those browsers, you'll want to add an extra CSS rule that targets just them to use the normal list-style:
请记住，此解决方案依赖于 :before 伪选择器，因此某些较旧的浏览器（尤其是 IE6 和 IE7）不会呈现生成的数字。对于这些浏览器，您需要添加一个额外的 CSS 规则，仅针对它们使用正常的列表样式：
ol.custom {
*list-style-type: decimal; /* targets IE6 and IE7 only */
}
回答by Kent
Here is the solution
这是解决方案
Number nested ordered lists in HTML
All you have to to is change a little bit here
你所要做的就是在这里稍微改变一下
ol li:before {
content: counter(level1) " "; /*Instead of ". " */
counter-increment: level1;
}
^^
^^
回答by neemzy
I just found a workaround for cases where you want to simply remove the dot. Not the best solution ever, but it's done with only CSS and works in every browser. The downside is that you need the textnode in the LI to be wrapped into another tag (<span> or something). In my own case, the <ol> was used as a list of links, so I could use my <a> tags !
我刚刚找到了一种解决方法，适用于您只想删除点的情况。不是有史以来最好的解决方案，但它仅使用 CSS 完成并且适用于所有浏览器。缺点是您需要将 LI 中的 textnode 包装到另一个标签（<span> 或其他东西）中。在我自己的例子中， <ol> 被用作链接列表，所以我可以使用我的 <a> 标签！
The CSS I used :
我使用的 CSS ：
ol li a {
float: right;
margin: 8px 0px 0px -13px; /* collapses <a> and dots */
padding-left: 10px; /* gives back some space between digit and text beginning */
position: relative; z-index: 10; /* make the <a> appear ABOVE the dots */
background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */
}
回答by ariel
You can add the numbers later using jQuery:
您可以稍后使用 jQuery 添加数字：
$("ul").each(function() {
$(this).find("li").each(function(index) {
$(this)
.css("list-style-type", "none")
.prepend("<div class='listnumber'>" + (index + 1) + "</div>");
})
})
Try the sample here.
试试这里的示例。
More info on jQuery here.
更多关于 jQuery 的信息在这里。
回答by user3051730
This is the simplest solution without counter-increment and inline tags inside li:
这是最简单的解决方案，在 li 中没有反增量和内联标签：
ol {list-style-position: inside; overflow: hidden; direction: rtl;}
li {position: relative; left: -15px; text-align: left; letter-spacing: 5px;}
