内联块和列表样式图像的CSS问题

Question

知道为什么在将display: inline-block应用于列表元素时，列表样式图像停止出现吗？

Answer 1

列表项最重要的样式属性是其display默认为list-item 。 该设置是元素以相应的list-style显示的原因。 将display设置为inline-block可以删除列表项中唯一使之成为列表项的内容。

Answer 2

如果希望列表元素使用内联块但仍显示项目符号，则可以使用:: before伪元素和content属性：

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

（\\ 25cf是Unicode实心圆圈符号，\\ a0是不间断空格）。

Answer 3

您可以使用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;
}