css - 横向无序列表

Question

我与无序列表斗争。有没有办法让它们水平？请参阅 jsFiddle。红色框应该位于每个文本的前面并相应地间隔开。我错过了什么，我很确定。

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'>&nbsp;</div><span class='legendTxt'> Demo 1</span></li>
     <li><div class='legendDiv'>&nbsp;</div><span class='legendTxt'> Demo 2</span></li>
     <li><div class='legendDiv'>&nbsp;</div><span class='legendTxt'> Demo 3</span></li>
</ul>

-谢谢

Answer 1

我更新了你的 JSFiddler HERE

您基本上犯了很多错误。代码比您开始时更简单。你遇到的最大问题是给你的红色盒子一个float:left这会自动将元素推到绝对左侧。您遇到的另一个问题是在内部创建 div。您的列表项不需要 span 标签。它已经被 <li> 包裹了标签。然而，正方形确实需要 span 标签来垂直对齐它并设置不同的样式而不影响 <li> 的其余部分。内容。