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

任何想法为什么当我将display: inline-block应用于列表元素时，列表样式图像停止出现？内嵌块和列表样式图像的CSS问题

来源

2012-04-13 Boris

由于内嵌块不是列表项目？ – BoltClock 2012-04-13 15:05:31

列表项最重要的样式属性是其display默认为list-item。该设置是元素与各自的list-style一起显示的原因。将display设置为inline-block会删除有关使您的列表项目成为列表项目的唯一信息。

来源

2012-04-13 15:07:52

我明白了，但我有一个很大的列表，我想把它分成两列，所以内联块看起来更合乎逻辑。 – Boris 2012-04-13 15:10:11

有很多方法可以将列表拆分成列，尽管它们都不是那么优雅。这里有一篇好文章：http://www.alistapart.com/articles/multicolumnlists/ – 2012-04-13 15:12:06

谢谢。正如你所说的，当元素的数量未知时，它们都不是非常优雅而且不灵活，除了旧的好的“浮动”。 – Boris 2012-04-13 15:18:44

如果你想有一个列表元素使用inline-block的，但仍然表现出子弹，你可以使用:: before伪元素和内容属性：

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

（\ 25CF是Unicode实心圆圈符号和\ a0是一个不间断的空间）。

来源

2013-12-31 09:22:10

您可以使用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-06 14:28:30 Patrick

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

回答

相关问题