CSS显示：内联不适用于 <li> 元件

Question

I have this 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>

With this CSS:

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

As you can see, the <li> elements should display inline, but, they don't, and I have no idea why. How can I fix this?

I made a jsfiddle

Answer 1

.nav-dots is a class added to the parent ul . You need to call display: inline; on the li s themselves

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

FIDDLE

Answer 2

It should be

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

or

.ni {
    display: inline-block;
}

Your CSS is applying the inline-block display property to the ul, not the li children

Answer 3

also

.ni{display:inline}

will work

Answer 4

display is not a property that is inherited. In order to keep the same structure you have and make the list items inline, you have to explicitly set their display property to inherit :

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

Here's a jsFiddle