HTML + CSS：没有期间的有序列表？

我认为这个问题的答案是否定的…但有没有人知道一个HTML / CSS的方式来创build一个有序的列表后没有一段时间的数字？ 或者，也可以指定分隔符？

理想情况下，我不想为每个数字做一个不同类别的列表式图像，但这些都是我迄今为止所能想到的…这似乎是非常不合理的。

IE： 

Default Style: 1. ______ 2. ______ 3. ______ Desired Style: 1 ______ 2 ______ 3 ______ Alternate Style: 1) ______ 2) ______ 3) ______

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

请记住，这个解决scheme依赖于：伪select器之前，所以一些旧的浏览器（特别是IE6和IE7）不会渲染生成的数字。 对于这些浏览器，您将需要添加一个额外的CSS规则，它只针对他们使用正常的列表样式： 

 ol.custom { *list-style-type: decimal; /* targets IE6 and IE7 only */ }

这是解决scheme

在HTML中编号嵌套的有序列表

所有你必须在这里改变一点 

 ol li:before { content: counter(level1) " "; /*Instead of ". " */ counter-increment: level1; }

^^

我刚刚发现一个解决方法，您只需要删除点的情况下。 不是有史以来最好的解决scheme，但它只用CSS完成，并在每个浏览器中工作。 缺点是你需要将LI中的textnode包装到另一个标签（<span>或其他）中。 在我自己的情况下，<ol>被用作链接列表，所以我可以使用我的<a>标签！

我用的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 ! */ }

您可以稍后使用jQuery添加数字： 

 $("ul").each(function() { $(this).find("li").each(function(index) { $(this) .css("list-style-type", "none") .prepend("<div class='listnumber'>" + (index + 1) + "</div>"); }) })

试试这里的示例。

更多关于jQuery的信息

似乎你搞砸了时间:)我认为唯一的方法是用<ul>自己构build列表

Interesting Posts