我为无序列表而苦恼。有没有办法使它们水平？请参阅jsFiddle。红框应该位于每个文本的前面，并相应地隔开。我想念的是什么，我敢肯定。
#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>
-谢谢
我在这里更新了您的JSFiddler
您基本上有很多错误。该代码从您开始时就比较简单。您遇到的最大问题是给您的红色框一个“ A”。float:left这会自动将元素推到绝对左侧。您遇到的另一个问题是在内部创建div。您的列表项不需要span标签。它已经被<li>标签包裹了。但是，正方形确实需要span标记以使其垂直对齐并以不同方式设置其样式，而不会影响其余<li>内容。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句