html - CSS 显示 :inline does not work on element

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 是添加到父级 ul 的 class。您需要在 li 本身上调用 display: inline;

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

FIDDLE