CODEWITHSUNDEEP
cssxhtml
shivlal
shivlal

Reputation: 23

Confusion with list-style<li>

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

Upvotes: 2

Views: 662

Answers (6)

fuxia
fuxia

Reputation: 63556

Another option, unfortunately not cross-browser:

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

Upvotes: 0

Jitendra Vyas
Jitendra Vyas

Reputation: 152687

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 &bull; like this <li>&bull; Lorem ipsum dolor sit amet</li>

Upvotes: 1

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146460

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

Upvotes: 5

user279860
user279860

Reputation: 160

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.

Upvotes: 0

knittl
knittl

Reputation: 265251

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

Upvotes: 0

Michael Haren
Michael Haren

Reputation: 108276

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

Upvotes: 7

Related Questions