HTML CSS：带圆圈内数字的编号列表

Question

我正在尝试在 CSS + HTML 中创建一个有序列表，如下所示：

我一辈子都想不出怎么做。我试过使用 list-image 但数字没有出现。我尝试设置背景，但如果 list-style-position 设置为 outside ，它不会出现在数字后面。我尝试将其设置为背景和 list-style-position: inside ，然后将文本放入 li 中 div ，但没有浮动组合对齐它，浮动等工作时没有环绕数字。

这似乎是我在很多网站上看到的东西，但目前我似乎找不到一个有效的例子，谷歌搜索也没有给我任何结果。

那么，有人可以帮我吗？您将如何使用 HTML+CSS 创建上述内容，最好不使用 JS，绝对不使用图像。此文本需要可选择和复制/粘贴。

因为评论者问，这是我现在的标记：

 <ol>
  <li><span>List item one.</span></li>
  <li><span>List item two.</span></li>
  <li><span>List item three.</span></li>
</ol>

我尝试过的 CSS 都没有接近工作，所以我不确定分享我目前拥有的东西的价值。这是一个失败的版本……

 ol { display: block; list-style: decimal outside url('/images/lists/yellow-circle-18px.png'); }
ol li { width: 176px; margin-right: 20px; float: left; }
ol li span { display: block; }

原文由 Andrew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题的水平布局方面可以使用 CSS float 和/或 display:inline-block; 来实现。这些都有很好的记录，因为列表元素通常用于使用这种技术创建下拉菜单，所以我不会在这里进一步讨论。

带圆圈的数字方面有点棘手。

它不能使用标准列表样式来实现，除非您准备使用图形，并对每个图像名称进行硬编码。这是一种非常老派的方法，我怀疑这不是您想要的。

我突然想到的一个想法是使用一种字体，其数字在圆圈中，例如 这个，然后简单地设置 <ol> 元素的样式以使用该字体，以及 <li> 使用常规字体的元素。这样做的缺点是您必须将列表保持在 10 个以下，并且用户的浏览器需要为此下载整个字体。此外，您需要选择一种与您网站上的其他字体相匹配的字体。可能不是一个理想的解决方案，但它会起作用。

一个更实用的解决方案是完全放弃列表样式（仍然使用相同的 HTML 标记，但设置 list-style:none; ）。然后将使用 CSS 很少使用的 :before 和 count() 功能插入数字。

在您的情况下，它将遵循以下几行：

 ol ul:before {
    content: counter(mylist);
}

这将为您提供相同的编号序列。然后，您需要向上面的选择器添加更多样式，为其提供圆形背景、一些颜色和一点边距。您还需要以某种方式设置 <li> 元素的样式，以便其整个文本从数字开始缩进，而不是在数字下方换行。我希望这可以通过 display:inline-block; 或类似的方式来完成。

它可能需要一些实验，我还没有给出完整的答案，但这项技术肯定会奏效。

有关文章和示例以及浏览器兼容性图表，请参阅 quirksmode.org 。

浏览器兼容性图表提供了有关此技术的一个主要缺点的线索：它不适用于 IE7 或更早版本。不过它在 IE8 和所有其他浏览器中确实有效，所以如果你能忍受 IE7 用户看不到它（现在没有那么多），那么它应该没问题。

原文由 Spudley 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我使用的是@Spudley 在他的回答中的想法，我使用的是我之前写的答案中的想法：

• 如何使用 CSS 用圆圈包围数字？

请参阅：http: //jsfiddle.net/j2gK8/

IE8 不支持 border-radius ，并且像 CSS3 PIE 这样的解决方法不适用于 :before 。而且，IE7 等较旧的浏览器不支持 counter 。

如果你想让它在旧的浏览器中工作，你将不得不求助于自己编写数字。我还将花哨的圆角换成普通图像（ 可能有 圆角，但在我的示例中没有）：

参见：http: //jsfiddle.net/XuHNF/

所以，有一种奇特的方法在 IE7+IE8 中不起作用，这可能会排除它。然后是丑陋但兼容的方法。

当然，总会有另一个问题。如果您有不同数量的文本，则会 发生这种情况。

然后你正在看这个问题：

• 可变高度的 CSS 浮动 Div
• https://stackoverflow.com/search?q=user%3A405015+masonry

原文由 thirtydot 发布，翻译遵循 CC BY-SA 3.0 许可协议