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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:31:03  来源:igfitidea点击:

HTML + CSS: Ordered List without the Period?

htmlcssseparatorhtml-lists

提问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

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;}