如何在多个列表项前添加彩色方块？

Question

如何设置这样的列表项？

所以在文字之前有某种彩色方块。我正在研究这个但却找不到它：

http://www.w3schools.com/cssref/pr_list-style-type.asp

它们不一定是列表项，但在我看来很方便，因为它是某种列表，我想在同一行中设置样式并显示，而不是像上图中的不同行。

我试过这个：

<ul class="ordering">
<li><div></div><span>One</span></li>
<li><div></div><span>Two</span></li>
<li><div></div><span>Three</span></li>
</ul>

并使用此css：

.ordering {
    list-style:none;
    min-width:250px;
}
.ordering div{
         width: 12px; height: 12px; float: left;
    }
.ordering span{
        display: block;
        float: left;
        font-size: 11px;
        line-height: 11px;
        padding-left: 5px;
    }

我遇到的问题是我无法将它们分开（它们粘在一起），另一个当我有许多不符合ordering类大小的项目时它们会断线但是正方形保留在前一行中，因此正方形+文本不会被视为一个部分。

Answer 1

我认为你不需要漂浮任何东西：

.ordering div {
     width: 12px; height: 12px; display: inline-block;
}

.ordering span{
    display: inline-block;
    font-size: 11px;
    line-height: 11px;
    margin-left: 5px;
}

（如果您希望在IE 7及更早版本中使用此功能，则需要将<div>更改为<span>或其他内联元素，例如：

.ordering span.colouredSquare {
     width: 12px; height: 12px; display: inline-block;
}

Answer 2

  

我遇到的问题是我无法将它们分开（它们粘在一起），另一个当我有许多物品不符合订购类的大小时它们会断线但是方块仍然存在在前一行中，因此square + text不被视为一个部分

您需要做的就是为li元素提供display: inline-block的显示属性。这应该可以解决你的间距问题并制作正方形＆amp;文本作为“块”移动，即

.ordering li
{
    display: inline-block;
}

Answer 3

你已经尝试过正确的方式。唯一的另一件事是你可以最小化html结构并使用nth-child()属性

<强> HTML

<ul class="ordering">
<li><span></span>One</li>
<li><span></span>Two</li>
<li><span></span>Three</li>
</ul>

<强> CSS

ul.ordering {    list-style:none;   min-width:250px; }
ul.ordering li{ 
  display:block; 
  clear:left; 
  vertical-align:middle;  
  font-size: 20px;
   line-height: 20px; 
  padding-left: 5px; }
ul.ordering li span{  width: 12px; height: 12px; background:red;  display:inline-block; margin-right:6px }
ul.ordering li:nth-child(2) span{ background:green !important;  }
ul.ordering li:nth-child(3) span{ background:blue !important;  }

<强> LIVE DEMO

Answer 4

或者，你可以通过伪元素的力量来清理你的标记。

HTML （注意：列表项只有一个子元素）

<ul>
  <li><p>Bender</p></li>
  <li><p>Fry</p></li>
  <li><p>Leela</p></li>
</ul>

的 CSS

ul { margin: 10px; }
li { position: relative; }

p:before {
  background: #bb3333;
  content: ".";
  display: inline-block;
  height: 10px;
  margin: 0 5px 0 0;
  text-indent: -10000px;
  width: 10px;
}

li:nth-child(2) p:before { background: #33bb33; }
li:nth-child(3) p:before { background: #3333bb; }

看我的小提琴：http://jsfiddle.net/uNR2M/2/

而不是nth-child我认为我会应用类，因为它对性能稍微好一些。

Answer 5

这应该可以解决问题：

<li>
    <div></div><span>One</span>
    <div class="clearfix"></div>
</li>

您应该在结束li之前添加一些clearfix。

.clearfix {
    clear: both;
}

Answer 6

我不会使用原生列表项目符号，因为它们不具有样式。 您可以使用嵌套的div和span，但IMO对于样式:before伪元素更清晰，例如：

Demo

HTML：

<ul>
    <li>item</li>
    <li class="red">item</li>
    <li class="blue">item</li>
</ul>

的CSS：

li { 
    position: relative; 
    list-style: none; 
    display: inline-block; 
    margin-left: 30px;
    }
li:before {
    content: ' ';
    width: 10px;
    height: 10px;
    position: absolute;
    left: -20px;
    top: 5px;
    background: green;
}
.red:before { background: red; }
.blue:before { background: blue; }