Question

我的标记中有一个水平列表，其中包含以下CSS：

ul li {
   display: inline;
   list-style: circle;
   list-style-type: circle;
}

当我删除display: inline;时，它可以正常工作。但我不能让它在横向上工作。

Answer 1

如果不覆盖列表项的显示类型，则仅显示列表装饰器。不是设置display: inline，而是应用float: left并给出一些余量以防止圆圈碰撞到前一个元素。

ul li {
  float: left;
  margin-left: 30px;
  list-style: circle;
  list-style-type: circle;
}

Here is an example.

ul li {
  float: left;
  margin-left: 30px;
  list-style: circle;
  list-style-type: circle;
}

/* this bit is optional, it only removes the left padding from the first item */
ul li:nth-of-type(1) {
  margin-left: 0;
}

<ul>
  <li> item 1 </li>
  <li> item 2 </li>
  <li> item 3 </li>
  <li> item 4 </li>
</ul>

Answer 2

好吧，如果你这样做，它就不会因为你基本上宣布＆＃34;停止以默认显示方式显示元素list-item并使用inline来代替＆＃34; 。要了解有关显示方法的更多信息，请查看DISPLAY PROPERTY。

现在，如果您想拥有项目符号并且仍然以内联方式显示它，那么有很多方法可以实现。您可以使用：在伪选择器之前，您可以使用背景等。

例如：

ul li {
  display: inline;
}

ul li:before {
  content: "• ";
}

或

ul li{
  display: inline-block;
}

ul li{
  padding-left:30px; background:url(images/bullet.png) no-repeat 0 50% ;
}

但只要你＆＃34; kill＆＃34; list-item显示方法，您需要找到一些方法来覆盖列表类型的DOM显示

Answer 3

使用：

而不是内联

li {
   float:left
}

或

li {
   display:inline-block
}

列表样式未显示在水平列表上

3 个答案: