HTML + CSS：带圆圈内数字的编号列表 [英] HTML + CSS: Numbered list with numbers inside of circles

问题描述

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

I'm trying to create an ordered list in CSS + HTML that looks like this:

我无法为我的生活找出如何做到这一点。我尝试使用 list-image ，但然后数字不出现。我尝试设置背景，但如果 list-style-position 设置为 outside 。我试着用背景和 list-style-position：inside 设置它，然后将文本放在 li a div 以对齐它，但没有浮点数，边距等的组合工作，而不包围数字。

I can't for the life of me figure out how to do this. I've tried using list-image but then the numerals don't appear. I tried setting a background, but it won't appear behind the number if list-style-position is set to outside. I tried setting it with a background and list-style-position: inside, then putting the text inside the li in a div to align it, but no combination of floats, margins, etc worked without wrapping around the numeral.

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

This seems like something I've seen on plenty of web sites, but at the moment I can't seem to find a working example, nor is Googling for this giving me any results.

所以，任何人都可以帮我这个？你将如何使用HTML + CSS创建上述，理想情况下不使用JS，绝对不使用图像。

So, can anyone help me with this? How would you create the above using HTML+CSS, ideally without using JS, and definitely without using just images. This text needs to be selectable and copy/pasteable.

由于评论者提出问题，以下是我现在的标记：

Because a commenter asked, here's the markup I have right now:

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

我试过的CSS都没有接近工作，所以我不确定共享我目前的价值。这里有一个失败的版本...

None of the CSS I've tried has even come close to working, so I'm not sure the value of sharing what I have currently. Here's one version that failed...

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

推荐答案

使用CSS float 和/或 display：inline-block; 。这些都有很好的记录，因为列表元素通常用于使用这种技术创建下拉菜单，所以我不会在这里进一步讨论。

The horizontal layout aspect of the question can be achieved using CSS float and/or display:inline-block;. These are well documented for this, as list elements are often used for creating drop-down menus using this technique, so I won't discuss it further here.

圆圈

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

It can't be achieved using standard list styles, unless you're prepared to use graphics, and hard-code the image name each one. This is quite an old-school approach, and I suspect it's not what you're looking for.

一个想法，突然出现在我的头将是使用一种字体有其数字在圈子中，例如这一个，然后简单地样式< ol> 元素以使用该字体，并使用< li> 元素来使用常规字体。这里的缺点是，你必须保持你的列表下面的10项，而用户的浏览器将需要下载一个完整的字体。此外，您需要选择一个与您网站上其他字体相匹配的字体。

One idea that popped into my head would be to use a font that has its numbers in circles, such as this one, and then simply style the <ol> element to use that font, and the <li> element to use your regular font. The down-side of this is that you'd have to keep your list below 10 items, and the user's browser would need to download a whole font just for that. Also, you would need to pick one that matched the other fonts on your site. Probably not an ideal solution, but it would work.

一个更实际的解决方案是完全放弃列表样式（仍然使用相同的HTML标记，但设置 list-style：none; ）。然后使用CSS的小的：和 count（）特征之前插入数字。

A more practical solution would be to abandon the list style entirely (still use the same HTML markup, but set list-style:none;). The numbers would then be inserted using CSS's little-used :before and count() features.

在您的情况下，它将沿着以下行：

In your case, it would be along the following lines:

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

这将给你相同的编号顺序。然后，您需要向上面的选择器添加更多样式，以给它一个圆形背景，一些颜色和一些边距。您还需要以某种方式设置< li> 样式的样式，以使其整个文本从数字缩进，而不是在数字下面。我希望这可以通过 display：inline-block; 或类似的方式完成。

This will give you the same numbered sequence. You would then need to add further styles to the selector above to give it a circle background, some colours, and a bit of margin. You would also need to style the <li> element somehow so that its entire text was indented from the number rather than wrapping below the number. I expect this could be done with display:inline-block; or similar.

实验，我没有给出完整的答案，但这种技术肯定有效。

It might need a bit of experimentation, and I haven't given the complete answer, but the technique would definitely work.

请参阅 quirksmode.org 以及浏览器兼容性图表。

See quirksmode.org for a writeup and examples, along with a browser compatibility chart.

浏览器兼容性图表提供了一个线索对于这种技术的一个主要缺点：它将不工作在IE7或更早。它在IE8工作，在所有其他浏览器，所以如果你可以生活在IE7用户没有看到它（和这些天没有那么多），那么应该很好。

And the browser compatibility chart gives a clue as to the one major down-side of this technique: It won't work in IE7 or earlier. It does work in IE8 though, and in all other browsers, so if you can live with IE7 users not seeing it (and there aren't that many of them these days), then it should be fine.

这篇关于HTML + CSS：带圆圈内数字的编号列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！