CSS display inline property with list-style-image property on li tags

Question

I m having a problem using CSS s display inline property with the list-style-image  property on  lt li gt  tags  Basically  I want to output the following     Link 1    Link 2   where   represents an image   I m doing this with the following bit of HTML    lt ol class  widgets  gt       lt li class  l1  gt Link 1 lt  li gt       lt li class  l2  gt Link 2 lt  li gt   lt  ol gt    which is styled with the following bit of CSS   ol widgets   list-style-type none     ol widgets li   display inline                  margin-left 10px     ol widgets li l1   list-style-image url image1 gif      ol widgets li l2   list-style-image url image2 gif       The problem is that when the list items are displayed inline  the images associated with the list items do not appear  They do appear if I take out the display inline property on the  lt li gt  tag   Is there a way to make the images appear even when the list items are displayed inline  or is that just impossible

User · Accepted Answer

Try using float  left  or right  instead of display  inline  Inline display replaces list-item display  which is what adds the bullet points

User · Answer

If you look at the  display  property in the CSS spec  you will see that  list-item  is specifically a display type  When you set an item to  inline   you re replacing the default display type of list-item  and the marker is specifically a part of the list-item type   The above answer suggests float  but I ve tried that and it doesn t work  at least on Chrome   According to the spec  if you set your boxes to float left or right  The  display  is ignored  unless it has the value  none    I take this to mean that the default display type of  list-item  is gone  taking the marker with it  as soon as you float the element   Edit  Yeah  I guess I was wrong  See top entry

User · Answer

I would suggest not to use list-style-image  as it behaves quite differently in different browsers  especially the image position  instead  you can use something like this  ol widgets  ol widgets li   list-style  none    ol widgets li   padding-left  20px  backgroud  transparent   image   no-repeat x y      it works in all browsers and would give you the identical result in different browsers

User · Answer

You want style image and Nav with float to each other then use like this  ol widgets ul   list-style-image url  some-img gif      ol widgets ul li   float left

User · Answer

You want the list items to line up next to each other  but not really be inline elements  So float them instead   ol widgets li        float  left      margin-left  10px

User · Answer

I had similar problem  i solve using css   before    the code looks likes this    widgets li before      content

User · Answer

I had similar problem  i solve using css   before    the code looks likes this    widgets li before      content

User · Answer

If you look at the  display  property in the CSS spec  you will see that  list-item  is specifically a display type  When you set an item to  inline   you re replacing the default display type of list-item  and the marker is specifically a part of the list-item type   The above answer suggests float  but I ve tried that and it doesn t work  at least on Chrome   According to the spec  if you set your boxes to float left or right  The  display  is ignored  unless it has the value  none    I take this to mean that the default display type of  list-item  is gone  taking the marker with it  as soon as you float the element   Edit  Yeah  I guess I was wrong  See top entry

User · Answer

I would suggest not to use list-style-image  as it behaves quite differently in different browsers  especially the image position  instead  you can use something like this  ol widgets  ol widgets li   list-style  none    ol widgets li   padding-left  20px  backgroud  transparent   image   no-repeat x y      it works in all browsers and would give you the identical result in different browsers

User · Answer

You want the list items to line up next to each other  but not really be inline elements  So float them instead   ol widgets li        float  left      margin-left  10px

User · Answer

You want the list items to line up next to each other  but not really be inline elements  So float them instead   ol widgets li        float  left      margin-left  10px

User · Answer

I would suggest not to use list-style-image  as it behaves quite differently in different browsers  especially the image position  instead  you can use something like this  ol widgets  ol widgets li   list-style  none    ol widgets li   padding-left  20px  backgroud  transparent   image   no-repeat x y      it works in all browsers and would give you the identical result in different browsers

User · Answer

You want style image and Nav with float to each other then use like this  ol widgets ul   list-style-image url  some-img gif      ol widgets ul li   float left

User · Answer

If you look at the  display  property in the CSS spec  you will see that  list-item  is specifically a display type  When you set an item to  inline   you re replacing the default display type of list-item  and the marker is specifically a part of the list-item type   The above answer suggests float  but I ve tried that and it doesn t work  at least on Chrome   According to the spec  if you set your boxes to float left or right  The  display  is ignored  unless it has the value  none    I take this to mean that the default display type of  list-item  is gone  taking the marker with it  as soon as you float the element   Edit  Yeah  I guess I was wrong  See top entry

User · Answer

I would suggest not to use list-style-image  as it behaves quite differently in different browsers  especially the image position  instead  you can use something like this  ol widgets  ol widgets li   list-style  none    ol widgets li   padding-left  20px  backgroud  transparent   image   no-repeat x y      it works in all browsers and would give you the identical result in different browsers

User · Answer

If you look at the  display  property in the CSS spec  you will see that  list-item  is specifically a display type  When you set an item to  inline   you re replacing the default display type of list-item  and the marker is specifically a part of the list-item type   The above answer suggests float  but I ve tried that and it doesn t work  at least on Chrome   According to the spec  if you set your boxes to float left or right  The  display  is ignored  unless it has the value  none    I take this to mean that the default display type of  list-item  is gone  taking the marker with it  as soon as you float the element   Edit  Yeah  I guess I was wrong  See top entry

User · Answer

You want the list items to line up next to each other  but not really be inline elements  So float them instead   ol widgets li        float  left      margin-left  10px

[html] CSS display:inline property with list-style-image: property on <li> tags

Examples related to html

Examples related to css