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

时间：2011-04-20 15:28:44

标签： html css geometry html-lists

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

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

9 个答案:

答案 0 :(得分：27)

我正在使用@Spudley在他的回答中提出的想法，我正在使用我之前写的回答中的想法：

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

IE8不支持border-radius，而像CSS3 PIE这样的解决方法不适用于:before。而且，IE7等旧版浏览器不支持counter。

如果您希望在旧版浏览器中使用它，则必须自己编写数字。我还为正常的图像交换了花哨的圆角（可能有圆角，但在我的例子中没有）：

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

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

当然，总会有另一个问题。如果您有不同数量的文字，请this happens。

然后你正在看这个问题：

答案 1 :(得分：22)

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

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

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

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

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

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

count()

这将为您提供相同的编号序列。然后，您需要在上面的选择器中添加更多样式，以便为其提供圆形背景，一些颜色和一些边距。您还需要以某种方式设置ol ul:before { content: counter(mylist); } 元素的样式，以使其整个文本从数字缩进而不是包含在数字下方。我希望可以使用<li>或类似内容完成此操作。

可能需要一些实验，我还没有给出完整的答案，但技术肯定会有用。

有关说明和示例，请参阅quirksmode.org以及浏览器兼容性图表。

浏览器兼容性图表给出了该技术的一个主要方面的线索：它在IE7或更早版本中不起作用。它确实可以在IE8中运行，并且在所有其他浏览器中，所以如果你可以忍受IE7用户没有看到它（并且现在没有那么多），那么应该没问题。

答案 2 :(得分：19)

如果有人还在阅读本文，我遇到了同样的问题并找到了一个非常有用的教程。

Styling ordered list numbers 

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

答案 3 :(得分：9)

我想我找到了解决方法。您的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; 
}

然后我会玩填充和半径以使其显示为圆圈

答案 4 :(得分：0)

编辑：我更改了代码，请尝试匹配您拥有的代码

我尝试使用旋转木马来完成此操作，我正在制作图像并链接到每个列表项内部，如下所示：

   <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 s中，然后从那里编辑css。一旦你拥有它们所有浮动的方式相同，div内的CSS不应该给你带来问题。你可以按照这样的方式设置它们的样式：

.listNumber
{
  postion: absolute;
  left: (#)px;
  top: (#)px;
}

我还记得我需要确保列表至少是其中每个项目的宽度，然后才能将它们全部浮动。如果不是，那么他们会坐在底部。

答案 5 :(得分：0)

我发现浏览器在各个地方放置了列表式图像，而且只有“外部”和“放置”。 “内部”位置控制。

我建议如下：

http://jsfiddle.net/vEZHU/

注意：您也可以使用浮动来摆放它们或我做了什么。此外，这让你知道精灵。

希望这是有道理的。

答案 6 :(得分：0)

我将使用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：

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

关于codepen：https://codepen.io/mkempinsky/pen/OBNXGO

答案 7 :(得分：0)

content：counter（li）不能在我的容器中工作，所以我发现了一些麻烦：）

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

http://jsfiddle.net/du6ezxj7/

答案 8 :(得分：0)

我设法得到了一个完美的圆形子弹，里面的数字只有css。尝试使用填充和半径来匹配您的字体样式。

<span style="padding: 0 5px;text-align:center;border-radius: 15px;background-color:#000;color:#fff;">
  1
</span>
相关问题
最新问题