Confusion with list-style<li>

Question

I have a problem with li, when I take li in inline display with list-style (bullet-point ), then bullet-points don't show.

Answer 1

bullet-point is not a valid value for list-style. Instead, use one of these:

• none No marker
• circle The marker is a circle
• disc The marker is a filled circle. This is default
• square The marker is a square
• armenian The marker is traditional Armenian numbering
• decimal The marker is a number
• decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)
• georgian The marker is traditional Georgian numbering (an, ban, gan, etc.)
• lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
• lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)
• lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
• lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
• upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
• upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
• upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
• inherit Specifies that the value of the list-style-type property should be inherited from the parent element

Click through to read more about this, including browser support

Answer 2

If you need crossbrowser compatibility

Here are 2 methods

1. Use images li {background-image:url(bullet.gif) no-repeat center left;padding-left:20px;display:inline;}

2. or use • like this <li>&bull; Lorem ipsum dolor sit amet</li>

Answer 3

i think you'd have to use float if you want to show the list items flowed and not as block plus see the bullets

Answer 4

Do you have margins/padding set for the ul or li's? Do you have a browser reset in your stylesheet setting list-style-type to none? I'm guessing it's one of those two things.

Answer 5

The list bullets show up because <li> elements have display: list-item by default. If you change it to anything else (e.g., display: inline or even display: block), the bullets are gone.

If you want to accomplish horizontal menus, you have two possibilities:

1. Leave the default display attribute and play with float instead
2. Simulate bullets with background images

Answer 6

Another option, unfortunately not cross-browser:

li
{
    display: inline;
}
li:before
{
    content: '•';
    padding: 0 .5em;
}