Horizontal unordered list - css

Question

I struggle with unordered list. Is there a way to make them horizontal? Please see the jsFiddle. The red boxes are suppose to be in front of each text and spaced accordingly. What am I missing, which I am sure a lot.
http://jsfiddle.net/5Lmymdwh/
#alertLegend li {
display: inline;
font-size:10px;
height:15px;
left:10px;
list-style-type:none;
margin:.5em .5em 0em -3.4em;
position:relative;
text-align:left;
}
.legendDiv {
background-color:#8B0000;
border:solid 1px #333;
float:left;
margin-right:2px;
width:15px;
}
.legendTxt {
font-size:12px;
color:#555;
padding-left:25px;
}
<ul id='alertLegend'>
<li><div class='legendDiv'> </div><span class='legendTxt'> Demo 1</span></li>
<li><div class='legendDiv'> </div><span class='legendTxt'> Demo 2</span></li>
<li><div class='legendDiv'> </div><span class='legendTxt'> Demo 3</span></li>
</ul>
-Thanks

Answer 1

I updated your JSFiddler HERE
You basically had a combination of mistakes. The code is simpler that you started with. The biggest problem you had was to give your red box a float:left This automaticaly pushes the element to the absolute left. The other problem you had was to create the divs inside. Your list item doesn't need a span tag. It is already wrapped by the <li> tags. The square however does need span tags to align it vertically and style it differently without affecting the rest of the <li> content.

Answer 2

Instead of using extra div for that custom bullet you could use :before : pseudo-element.
#alertLegend li {
display: inline-block;
font-size: 10px;
height: 15px;
font-size: 12px;
color: #555;
list-style-type: none;
}
#alertLegend li:not(:last-child) {
margin-right: 10px;
}
#alertLegend li:before {
content: '';
border: solid 1px #333;
background-color: #8B0000;
float: left;
height: 12px;
width: 15px;
}
<ul id='alertLegend'>
<li>Demo 1</li>
<li>Demo 2</li>
<li>Demo 3</li>
</ul>

Answer 3

Here is working css:
#alertLegend li {
display: inline-block;
list-style-type:none;
height:15px;
}
.legendDiv {
background-color:#8B0000;
border:solid 1px #333;
float:left;
margin-right:2px;
width:15px;
height: 15px;
}
.legendTxt {
font-size:12px;
color:#555;
}

Answer 4

Not too sure what you're exactly trying to achieve but you can simplify your HTML/CSS a lot further by using border-left or background.
See here: http://jsfiddle.net/pavkr/yrxbLvkf/2/

Answer 5

When I looked at the JS fiddle, I noticed that the text wasn't in the div's at all. I have since moved them, and altered the text color to be more legible inside the div's. Also if you want to format the text inside a div, you can make the edits there instead of a span class like you had (has been removed, albeit altered but to show simplicity).
#alertLegend li {
display: inline;
font-size:10px;
height:15px;
left:10px;
list-style-type:none;
margin:.5em .5em 0em -3.4em;
position:relative;
text-align:left;
}
.legendDiv {
background-color:#8B0000;
border:solid 1px #333;
float:left;
margin-right:2px;
width:30px;
color: white;
}
<ul id='alertLegend'>
<li>
<div class='legendDiv'>Demo1</div>
</li>
<li>
<div class='legendDiv'>Demo2</div>
</li>
<li>
<div class='legendDiv'>Demo3</div>
</li>
</ul>