List-style goes away with inline-block - but I want my list decorators to stay

css, html, html-lists

Solution

An alternate method consists of floating the `li` elements.

<ul>
    <li>the item</li>
    <li>the item</li>
    <li>the item</li>
</ul>

ul {
    overflow: auto; /* similar to clearing the floats... */
    border: 1px solid gray;
}
ul li {
    float: left;
    border: 1px solid blue;
    padding: 10px;
    margin: 0 20px;
}

Demo fiddle: http://jsfiddle.net/audetwebdesign/kBNVz/

Problem

How do I get them to stay? I have the following list - the moment I add to my list `li` `display: inline-block;` the custom list decorators I designated disappear. Is there a CSS way of keeping my list decorators when the list is horizontal, or are list decorators only ever supposed to appear with vertical lists? Of course I could just have an image next to every list entry, but for simplicity's sake I'd rather deal with this in the CSS. ``` .first-page-menu-list { list-style-image: url('../graphics/list-style-image.png'); list-style-position: inside; text-transform: uppercase; } ```

Original source