列表样式与内联块一起消失 - 但我希望我的列表装饰器保持不变

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

另一种方法是浮动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;
}

演示小提琴:http://jsfiddle.net/audetwebdesign/kBNVz/