html - 列表样式随着内联 block 消失了——但我希望我的列表装饰器保留下来

Question

我怎样才能让他们留下来？

我有以下列表 - 当我添加到我的列表时 li display: inline-block; 我指定的自定义列表装饰器消失了。

当列表是水平的时，是否有一种 CSS 方法可以保留我的列表装饰器，或者列表装饰器是否只应该出现在垂直列表中？当然，我可以在每个列表条目旁边放一张图片，但为了简单起见，我宁愿在 CSS 中处理它。

.first-page-menu-list {
    list-style-image: url('../graphics/list-style-image.png');
    list-style-position: inside;
    text-transform: uppercase;
}

Answer 1

另一种方法是 float li 元素。

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

演示 fiddle :http://jsfiddle.net/audetwebdesign/kBNVz/