Question

How can I style list items like this?

So some kind of colored square before the text. I was looking into this but couldn’t find it :

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

They don’t have to be list items but it seemed to me convinient because it is some kind of list which I would like to style and display in the same line not in different lines like in image above.

I’ve tried this :

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

and with this 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;
    }

The problem I encounter is that I can’t seperate them (they’re glued together), and the other one when I have many items which don’t fit in the size of ordering class they break line but the square remains in the previous line so square + text isn’t being treated as one part.

Answer 1

You have tried in the right way. Only additional thing is you can minimize the html structure and use nth-child() property

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