HTML + CSS：圆圈内带有数字的编号列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5732836/
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
HTML + CSS: Numbered list with numbers inside of circles
提问by Andrew
I'm trying to create an ordered list in CSS + HTML that looks like this:
我正在尝试在 CSS + HTML 中创建一个如下所示的有序列表：
I can't for the life of me figure out how to do this. I've tried using list-imagebut then the numerals don't appear. I tried setting a background, but it won't appear behind the number if list-style-positionis set to outside. I tried setting it with a background and list-style-position: inside, then putting the text inside the liin a divto align it, but no combination of floats, margins, etc worked without wrapping around the numeral.
我一生都无法弄清楚如何做到这一点。我试过使用，list-image但数字没有出现。我试着设置一个背景，但如果它不会出现后面的数字list-style-position设置为outside。我尝试使用背景和 设置它list-style-position: inside，然后将文本放入lia 中div以对齐它，但是浮动、边距等的组合在没有环绕数字的情况下不起作用。
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.
那么，有人可以帮我解决这个问题吗？您将如何使用 HTML+CSS 创建上述内容，理想情况下不使用 JS，绝对不只使用图像。此文本需要可选择和复制/粘贴。
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...
我尝试过的 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; }
采纳答案by Spudley
The horizontal layout aspect of the question can be achieved using CSS floatand/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.
问题的水平布局方面可以使用 CSSfloat和/或display:inline-block;. 这些都有很好的文档记录，因为列表元素通常用于使用这种技术创建下拉菜单，所以我不会在这里进一步讨论。
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.
突然出现在我脑海中的一个想法是使用一种带有圆圈数字的字体，例如this one，然后简单地设置<ol>元素的样式以使用该字体，<li>元素使用您的常规字体。这样做的缺点是您必须将列表保持在 10 个以下，并且用户的浏览器需要为此下载整个字体。此外，您需要选择一种与您网站上的其他字体相匹配的字体。可能不是一个理想的解决方案，但它会起作用。
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 :beforeand count()features.
更实用的解决方案是完全放弃列表样式（仍然使用相同的 HTML 标记，但 set list-style:none;）。这些数字将被使用CSS的很少使用的插入:before和count()功能。
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.
这将为您提供相同的编号序列。然后，您需要向上面的选择器添加更多样式，为其提供圆形背景、一些颜色和一点边距。您还需要以<li>某种方式设置元素的样式，以便其整个文本从数字缩进，而不是在数字下方换行。我希望这可以用display:inline-block;或类似的方法来完成。
It might need a bit of experimentation, and I haven't given the complete answer, but the technique would definitely work.
它可能需要一些实验，我还没有给出完整的答案，但该技术肯定会奏效。
See quirksmode.orgfor a writeup and examples, along with a browser compatibility chart.
有关文章和示例以及浏览器兼容性图表，请参阅quirksmode.org。
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.
浏览器兼容性图表提供了有关此技术的一个主要缺点的线索：它在 IE7 或更早版本中不起作用。不过，它确实适用于 IE8 和所有其他浏览器，因此如果您可以忍受 IE7 用户看不到它（而且这些天没有那么多用户），那么它应该没问题。
回答by thirtydot
I'm using ideas that @Spudley has in his answer, and I'm using ideas from a previous answer I wrote:
我正在使用@Spudley 在他的回答中的想法，并且我正在使用我之前写过的答案中的想法：
See:http://jsfiddle.net/j2gK8/
见：http : //jsfiddle.net/j2gK8/
IE8 does not support border-radius, and workarounds like CSS3 PIE do not work with :before. And, older browsers like IE7 do not support counter.
IE8 不支持border-radius，并且像 CSS3 PIE 这样的变通方法也不适用于:before. 而且，像 IE7 这样的旧浏览器不支持counter.
If you want to make it work in older browsers, you'll have to resort to writing the numbers yourself. I also exchanged the fancy rounded corners for a normal image (which could haverounded corners, but doesn't in my example):
如果您想让它在较旧的浏览器中工作，则必须自己编写数字。我还将花哨的圆角换成了普通图像（可能有圆角，但在我的示例中没有）：
See:http://jsfiddle.net/XuHNF/
见：http : //jsfiddle.net/XuHNF/
So, there's the fancy approach that won't work in IE7+IE8, which probably rules it out. And then there's the ugly, but compatible method.
所以，有一种奇特的方法在 IE7+IE8 中不起作用，这可能会排除它。然后是丑陋但兼容的方法。
Of course, there's always another problem. If you have differing amounts of text, then this happens.
当然，总有另一个问题。如果您有不同数量的文本，则会发生这种情况。
You're then looking at this problem:
然后你会看到这个问题：
回答by Rob Rasmussen
If anyone is still reading this, I encountered the same issue and found a tutorial that was extremely helpful.
如果有人还在阅读这篇文章，我遇到了同样的问题，并找到了一个非常有帮助的教程。
ol {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}
ol > li {
position:relative; /* Create a positioning context */
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
border-top:2px solid #666;
background:#f6f6f6;
}
ol > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}
回答by Alexios Tsiaparas
I think I found out a solution for that. Your HTML code would be
我想我找到了解决方案。您的 HTML 代码将是
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
If you apply the following styles, it gets quite like a circle:
如果您应用以下样式，它会变得很像一个圆圈：
ol {margin-left:0; padding-left:0; counter-reset:item}
ol>li {margin-left:0; padding-left:0; counter-increment:item; list-style:none inside;margin-bottom:10px}
ol>li:before {
content:"(" counter(item) ")";
padding:3px 5px;
margin-right:0.5em;
background:#ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
I would then play around with paddings and radius in order to make it appear as a circle
然后我会用填充和半径来玩，以使其看起来像一个圆圈
回答by Stanley Cup Phil
EDIT:I changed up the code so try and match what you have
编辑：我改变了代码，所以尝试匹配你所拥有的
I tried to do this with a carousel that I was making with an image and link inside of each list item like this:
我尝试使用我在每个列表项中使用图像和链接制作的旋转木马来做到这一点，如下所示：
<ol id = "list">
<li class = "listItems">
<!-- Image -->
<img src = "YourImage" class = "listNumber"></div>
<!-- Text -->
<div class = "listInfo">Info goes here</div>
</li>
</ol>
and so on for each item. To get them to appear horizontally my css looked like this:
等等。为了让它们水平出现，我的 css 看起来像这样：
#list
{
list-style: none;
width: 5000px; /* Total width of list IMPORTANT*/
}
/* Image gallery list item*/
#list li
{
float :left; /* Arranges the items in a horizontal list IMPORTANT */
}
That made all images line up horizontally. To edit each item inside the list you will need to place them in divs and then edit the css from there. Once you have them all floating the same way the css inside the divs shouldn't give you problem. You can just style them by class like this:
这使得所有图像水平排列。要编辑列表中的每个项目，您需要将它们放在divs 中，然后从那里编辑 css。一旦你让它们都以同样的方式浮动，div 内的 css 就不会给你带来问题。您可以像这样按类设置它们的样式：
.listNumber
{
postion: absolute;
left: (#)px;
top: (#)px;
}
I also remember that i needed to makes sure the list was at least the width of each item in it before I could float them all left. If it wasn't, then they would sit on the bottom.
我还记得我需要确保列表至少是其中每个项目的宽度，然后才能将它们全部浮动。如果不是，那么他们将坐在底部。
回答by gutierrezalex
I find that browsers position list-style-image at various places and one has only the "outside" & "inside" position control.
我发现浏览器将 list-style-image 定位在不同的地方，并且只有“外部”和“内部”位置控制。
I recommend the following:
我推荐以下内容：
NOTE: You can also use float to lay them out or what I did. Also, this asumes you know of sprites.
注意：您也可以使用浮动来布置它们或我所做的。此外，这假设您知道精灵。
Hope this makes sense.
希望这是有道理的。
回答by michele
I would use flexbox and add 'divs' to the 'li' containing the number.
我会使用 flexbox 并将“divs”添加到包含数字的“li”中。
<div class="container">
<ul class="info-list">
<li><div>1.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>2.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>3.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
</ul>
<ul class="info-list">
<li><div>4.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>5.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>6.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
</ul>
</div>
CSS:
CSS：
.container {
display: flex;
}
.info-list li {
list-style: none;
display: flex;
}
.info-list li > div {
display: inline-block;
border: 2px solid #ccc;
border-radius: 100%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: space-around;
margin-right: 10px;
}
On codepen: https://codepen.io/mkempinsky/pen/OBNXGO
关于 codepen：https://codepen.io/mkempinsky/pen/OBNXGO
回答by Ale? Pázner
content:counter(li)with increment doesn't work in my less so I found some wokraround:)
content:counter(li)with increment 在我的 less 中不起作用，所以我找到了一些 wokraround :)
li {
position: relative;
line-height: 2.5em;
list-style-type: none;
&:before{
content: '';
position: absolute;
left: -29px;
top: 7px;
display: block;
background: @btn-bg-secondary;
width: 20px;
height: 20px;
border-radius: 50%;
color: @bg-color-primary;
padding-left: 7px;
line-height: 1.5em;
}
&:nth-child(1):before{
content: '1';
}
&:nth-child(2):before{
content: '2';
}
&:nth-child(3):before{
content: '3';
}
&:nth-child(4):before{
content: '4';
}
&:nth-child(5):before{
content: '5';
}
&:nth-child(6):before{
content: '6';
}
&:nth-child(7):before{
content: '7';
}
&:nth-child(8):before{
content: '8';
}
}
