html - 列表样式随 inline-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

另一种方法包括浮动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/

Answer 2

看来您是对的，但是对此有一个简单的解决方法，只要您不使用背景就可以使用它，否则请尝试以下操作：

CSS：

.first-page-menu-list li {
    background: url('../graphics/list-style-image.png') no-repeat 0px 4px;
    display: inline;
    text-transform: uppercase;
    padding-left: 15px;
    margin-left: 10px;
}

HTML：

<ul class="first-page-menu-list">
    <li>asd</li>
    <li>asdf </li>
    <li> asdf</li>
</ul>

使用 px 值，你会很容易看到哪个魔法

Answer 3

Flexbox 可以很好地解决这个问题，而无需清除浮动。

ul.inline-list-style {
  list-style: upper-roman;
  display: flex;      
}
ul.inline-list-style li {
  flex: 1;
}