CODEWITHSUNDEEP
htmlcss
supersize
supersize

Reputation: 14823

list-style not shown on horizontal list

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.

Upvotes: 2

Views: 1390

Answers (3)

Woodrow Barlow
Woodrow Barlow

Reputation: 9097

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>

Upvotes: 3

Devin
Devin

Reputation: 7720

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

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Instead of inline, use:

li {
   float:left
}

or

li {
   display:inline-block
}

Upvotes: 0

Related Questions