0

知道为什么当我应用于display: inline-block列表元素时,列表样式图像停止出现吗?

4

3 回答 3

6

列表项最重要的样式属性是其display默认值为list-item. 该设置是元素与相应的list-style. 设置displayinline-block删除有关列表项的唯一使其成为列表项的内容。

于 2012-04-13T15:07:52.167 回答
2

如果您希望列表元素使用 inline-block 但仍显示项目符号,则可以使用 ::before 伪元素和 content 属性:

li {
 display: inline-block;
}
li::before {
 content: '\25cf\a0';
}

( \25cf 是 Unicode 实心圆圈符号, \a0 是不间断空格)。

于 2013-12-31T09:22:10.090 回答
1

您可以使用 float:left; 在您的 li 元素上并添加最小宽度和最小高度

.footer ul li{
    float: left;
    list-style-image: url(../images/arrow.png);
    margin: 0px 0px 10px 0px;
    box-sizing: border-box;
    min-height: 38px;
    min-width: 300px;
}
于 2014-06-06T14:28:30.680 回答