CODEWITHSUNDEEP
htmlcss
mipadi
mipadi

Reputation: 410912

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

I'm having a problem using CSS's display:inline property with the list-style-image: property on <li> 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:

<ol class="widgets">
    <li class="l1">Link 1</li>
    <li class="l2">Link 2</li>
</ol>

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 <li> tag.

Is there a way to make the images appear even when the list items are displayed inline, or is that just impossible?

Upvotes: 20

Views: 103250

Answers (6)

annakata
annakata

Reputation: 75862

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

Upvotes: 36

Angelo Ber&#231;acola
Angelo Ber&#231;acola

Reputation: 173

I had similar problem, i solve using css ":before".. the code looks likes this:

.widgets li:before{
    content:"• ";
}

Upvotes: 4

CSS Guy
CSS Guy

Reputation: 1984

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;
}

Upvotes: 2

Liwen
Liwen

Reputation: 937

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.

Upvotes: 1

Jesse Millikan
Jesse Millikan

Reputation: 3145

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. :)

Upvotes: 2

flamingLogos
flamingLogos

Reputation: 6019

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;
}

Upvotes: 6

Related Questions