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

Question

I have a horizontal list in my markup with the following CSS:

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

When I remove the display: inline; it works fine. But I can't get it to work on the horizontal one.

Answer 1

The list decorators will only be displayed if you don't override the display type for the list item. Rather than setting display: inline , apply a float: left and give some margin to prevent the circles from colliding into the previous element.

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

well, if you do that it won't shw because you're basically declaring "stop displaying the element in its default display method list-item and use inline instead" . To learn more about display methods, please take a look do DISPLAY PROPERTY .

Now, if you want to have bullets AND still display it inline, there are many ways to do it. You can use a :before pseudo-selector, you can use a background, etc.

For example:

ul li {
  display: inline;
}

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

or

ul li{
  display: inline-block;
}

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

but as long as you "kill" the list-item display method, you'll need to find some ways to override the DOM display of list types

Answer 3

Instead of inline, use:

li {
   float:left
}

or

li {
   display:inline-block
}