HTML + CSS：圆圈内数字的编号列表
我正在尝试在CSS + HTML中创build一个有序列表，如下所示： 
我不能为了我的生活找出如何做到这一点。 我已经尝试使用list-image但数字不会出现。 我试着设置一个背景，但是如果list-style-position被设置为outside ，它不会出现在数字的后面。 我试着用背景和list-style-position: inside ，然后把里面的文本放到div里面去alignment，但是没有包含浮点数，边距等的工作，没有包围数字。
这似乎是我在很多网站上看到的东西，但目前我似乎无法find一个有效的示例，Google也没有给出任何结果。
那么，有谁能帮助我呢？ 你将如何使用HTML + CSS来创build上述内容，理想情况下不使用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('http://img.dovov.comlists/yellow-circle-18px.png'); } ol li { width: 176px; margin-right: 20px; float: left; } ol li span { display: block; }
问题的水平布局方面可以使用CSS float和/或display:inline-block;来实现display:inline-block; 。 这些都是有据可查的，因为列表元素通常用于使用这种技术创build下拉菜单，所以我不会在这里进一步讨论。
圆圈数字方面有点棘手。
使用标准列表样式是无法实现的，除非您准备使用graphics，并对每个图像名称进行硬编码。 这是相当老派的做法，我怀疑这不是你想要的。
我脑海里想到的一个想法就是使用一个字号，例如这个字母，然后简单地使用<ol>元素来使用这个字体，用<li>元素来使用你的常规字体。 这样做的另外一面是，你必须把你的列表保存在10个以下的项目中，用户的浏览器需要下载一个完整的字体。 此外，你需要select一个匹配您的网站上的其他字体。 可能不是一个理想的解决scheme，但它会工作。
更实际的解决scheme是完全放弃列表样式（仍使用相同的HTML标记，但设置list-style:none; ）。 然后使用CSS的less量使用:before和count()来插入数字。
在你的情况下，这将是如下几行：
ol ul:before { content: counter(mylist); }
这会给你相同的编号序列。 然后你需要添加更多的样式到上面的select器，给它一个圆形的背景，一些颜色和一点余量。 您还需要以某种方式设置<li>元素的样式，以便整个文本从数字缩进，而不是在数字下面打包。 我期望这可以通过display:inline-block;来完成display:inline-block; 或类似的。
它可能需要一些实验，我还没有给出完整的答案，但技术肯定会奏效。
请参阅quirksmode.org以获得书面和示例，以及浏览器兼容性图表。
浏览器兼容性图表提供了这种技术的一个主要缺点：它不能在IE7或更早的版本中工作。 它在IE8中工作，而在所有其他浏览器中，所以如果你能和IE7用户一起看不到它（现在也没有那么多），那应该没问题。
我正在使用@Spudley在他的回答中提出的想法，而我正在使用我之前回答的想法：
- 如何使用CSS围绕一个数字用圆圈？
请参阅： http : //jsfiddle.net/j2gK8/
IE8不支持border-radius ，像CSS3 PIE这样的解决方法不能用于:before 。 而且，像IE7这样的老式浏览器不支持counter 。
如果你想让它在老的浏览器中工作，你将不得不自己写数字。 我也交换了一个正常的形象（ 可能有圆angular，但在我的例子中）奇特的圆angular：
请参阅： http : //jsfiddle.net/XuHNF/
所以，有一种奇特的方法，在IE7 + IE8中不起作用，这可能会将其排除在外。 然后是丑陋的，但兼容的方法。
当然，总是有另一个问题。 如果你有不同数量的文字，那就发生这种情况 。
你然后看着这个问题：
- CSS浮动Div在variables高度
- https://stackoverflow.com/search?q=user%3A405015+masonry
如果有人还在读这个，我遇到了同样的问题，发现一个非常有用的教程。
devise有序的列表号码
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;}
我想我find了一个解决scheme。 你的HTML代码是
<ol> <li>First item</li> <li>Second item</li> </ol>
如果您应用以下样式，则会变得非常像一个圆圈：
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; }
然后，我会玩填充和半径，以使其显示为一个圆圈
编辑：我改变了代码，所以尝试和你有什么匹配
我试图用一个旋转木马做一个图像，并链接到每个列表项目里面，像这样：
<ol id = "list"> <li class = "listItems"> <!-- Image --> <img src = "YourImage" class = "listNumber"></div> <!-- Text --> <div class = "listInfo">Info goes here</div> </li> </ol>
等等每个项目。 为了让他们水平显示我的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 */ }
这使得所有的图像水平排列。 要编辑列表中的每个项目，您需要将它们放在div ，然后从那里编辑css。 一旦你有他们所有的浮动相同的方式CSS内部的CSS不应该给你的问题。 你可以按照这样的方式来devise风格：
.listNumber { postion: absolute; left: (#)px; top: (#)px; }
我还记得，我需要确保列表至less是每个项目的宽度，才可以将它们全部左移。 如果不是，那么他们会坐在底部。
我发现浏览器在不同的地方定位了list-style-image，只有“outside”和“inside”的位置控制。
我build议如下：
注意：你也可以使用float来布局它们或者我做了什么。 此外，这个假设你知道的精灵。
希望这是有道理的。
