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

问题描述

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

我这辈子都不知道该怎么做.我试过使用 list-image 但数字没有出现.我尝试设置背景，但如果 list-style-position 设置为 outside，它不会出现在数字后面.我尝试将其设置为背景和 list-style-position: inside，然后将 li 内的文本放在 div 中以对齐它，但如果不环绕数字，任何浮点数、边距等组合都不会起作用.

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

那么，谁能帮我解决这个问题?您将如何使用 HTML+CSS 创建上述内容，理想情况下不使用 JS，并且绝对不使用图像.此文本必须是可选择和复制/粘贴的.

因为有评论者问，这是我现在拥有的标记:

<li><span>列出第一项.</span></li><li><span>列出第二项.</span></li><li><span>列出第三项.</span></li></ol>

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

ol { 显示:块；list-style: url外小数点('/images/lists/yellow-circle-18px.png');}ol li { 宽度:176px;右边距:20px；向左飘浮;}ol li span { 显示:块；}

解决方案

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

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

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

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

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

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

ol ul:before {内容:计数器(mylist)；}

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

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

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

浏览器兼容性图表提供了有关该技术的一个主要缺点的线索:它在 IE7 或更早版本中不起作用.但它在 IE8 和所有其他浏览器中都可以工作，所以如果你可以忍受 IE7 用户看不到它(而且现在没有那么多用户)，那么它应该没问题.

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

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.

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>

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

解决方案

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.

The circled number aspect is a bit more tricky.

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.

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.

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

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.

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

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屋！