Question

我有这个HTML：

<div class="nav">
<ul class="nav-dots">
  <li class='ni n1'><a href="" class='nia'>dot</a></li>
  <li class='ni n2'><a href="" class='nia'>dot</a></li>
  <li class='ni n3'><a href="" class='nia'>dot</a></li>
</ul>
</div>

使用这个CSS：

.nav-dots {
   display: inline-block;
}

正如您所看到的，<li>元素应该以内联方式显示，但是，它们不会显示，我不知道为什么。我该如何解决这个问题？

我做了jsfiddle

Answer 1

.nav-dots是class添加到父ul。您需要在display: inline;自己

上致电li

li {
  display: inline;
  list-style-type:none;
}

FIDDLE

Answer 2

应该是

.nav-dots li {
    display: inline-block;
}

或

.ni {
    display: inline-block;
}

您的CSS正在将内联块显示属性应用于ul，而不是li子

Answer 3

也

.ni{display:inline}

将起作用

Answer 4

display不是继承的属性。为了保持您拥有的相同结构并使列表项内联，您必须将其显示属性显式设置为inherit：

li { list-style-type:none; display:inherit; }

这是 jsFiddle

css display：inline不适用于<li>元素</li>

4 个答案: