html - 如何在多个列表项前面添加一个彩色方 block ？

Question

如何设置这样的列表项样式？

所以在文本之前有一些彩色方 block 。我正在调查这个但找不到它:

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

您尝试的方法是正确的。唯一的额外事情是你可以最小化 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