知道为什么当我将display: inline-block
应用于列表元素时,list-style-image会停止显示?
答案 0 :(得分:6)
列表项最重要的样式属性是display
默认为list-item
。该设置是元素与相应list-style
一起显示的原因。将display
设置为inline-block
会删除列表项的唯一内容,使其成为列表项。
答案 1 :(得分:2)
如果您希望列表元素使用内联块但仍显示项目符号,则可以使用:: before伪元素和内容属性:
li {
display: inline-block;
}
li::before {
content: '\25cf\a0';
}
(\ 25cf是Unicode填充的圆圈符号,\ a0是不间断的空格)。
答案 2 :(得分:1)
你可以使用float:left;在你的li元素上添加一个min-width和min-height
.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;
}