Question

我在无序列表中挣扎。有没有办法让它们水平？请参阅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'>&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>

-Thanks

Answer 1

您可以使用div：伪元素，而不是为该自定义项目符号使用额外的:before。

＆＃13;

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

＆＃13;

<ul id='alertLegend'>
  <li>Demo 1</li>
  <li>Demo 2</li>
  <li>Demo 3</li>
</ul>

＆＃13;

Answer 2

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

我更新了您的JSFiddler HERE

你基本上都有错误的组合。您开始使用的代码更简单。你遇到的最大问题是给你的红色框float:left这个自动将元素推向绝对左边。你遇到的另一个问题是在里面创建div。您的列表项不需要span标记。它已被<li>标记包装。然而，正方形确实需要跨度标记来垂直对齐并以不同方式对其进行样式设置，而不会影响<li>内容的其余部分。

Answer 4

不太确定您正在尝试实现的目标，但您可以使用border-left或background进一步简化HTML / CSS。

见这里：http://jsfiddle.net/pavkr/yrxbLvkf/2/

Answer 5

当我看着JS小提琴时，我注意到文字根本没有在div中。我已经移动了它们，并改变了文本颜色，使其在div中更加清晰。此外，如果你想格式化div中的文本，你可以在那里进行编辑，而不是像你一样进行跨度类（已被删除，虽然已被删除但显示简单）。

HTML

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

CSS

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

水平无序列表

5 个答案: