水平无序列表

Question

我对无序列表很苦恼。有办法让它们变成水平的吗？请看jsFiddle。红色框应该在每个文本的前面，并且有相应的间距。我到底漏了什么，我相信有很多。

http:/jsfiddle.net5Lmymdwh

#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 这里

你基本上是错误的组合。代码比你一开始的要简单。你最大的问题是给你的红色方框一个 float:left 这样就会自动地把元素推到绝对左边。你的另一个问题是在里面创建div。你的列表项不需要span标签。它已经被 <li> 标签。然而，方块确实需要 span 标签来垂直对齐，并在不影响其余的 <li> 内容。

Answer 2

而不是使用额外的 div 对于那颗定制子弹，你可以用 :before 伪元素。

#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

这里是工作的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

我不太清楚你到底想达到什么目的 但你可以通过使用以下方法来进一步简化HTMLCSS border-left 或 background.

请看这里。http:/jsfiddle.netpavkryrxbLvkf2。

Answer 5

当我看JS提琴的时候，我注意到文字根本不在div的里面。后来我把它们移开了，并且改变了文字的颜色，使其在div的里面更加清晰可辨。另外，如果你想在div里面格式化文字，你可以在那里进行编辑，而不是像以前那样在span类中进行编辑（已经被删除了，虽然被修改了，但是为了显示简单性）。

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