HTML + CSS:带有圆圈内数字的编号列表

Question

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

我不能为我的生活弄清楚如何做到这一点.我尝试过使用,list-image但数字不会出现.我尝试设置背景,但如果list-style-position设置为,它将不会出现在数字后面outside.我尝试用背景设置它list-style-position: inside,然后将文本放在lia中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; }

Answer 1

我正在使用@Spudley在他的答案中提出的想法,我正在使用我之前写的答案:

• 如何用CSS围绕一个带圆圈的数字？

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

IE8不支持border-radius,并且CSS3 PIE之类的解决方法无法使用:before.并且,像IE7这样的旧浏览器不支持counter.

如果你想让它在旧版浏览器中运行,你就不得不自己编写这些数字.我还为正常的图像交换了花哨的圆角(可能有圆角,但在我的例子中没有):

请参阅: http ://jsfiddle.net/XuHNF/

因此,有一种奇特的方法在IE7 + IE8中不起作用,IE7 + IE8可能会将其排除在外.然后是丑陋但兼容的方法.

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

然后你在看这个问题:

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

Answer 2

问题的水平布局方面可以使用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用户没有看到它(并且现在没有那么多),那么它应该没问题.

Answer 3

如果有人还在读这篇文章,我遇到了同样的问题并找到了一个非常有用的教程.

样式有序列表编号

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

Answer 4

我想我找到了解决方案.你的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; 
}

然后我会玩填充和半径,以使它看起来像一个圆圈