內嵌塊和列表樣式圖像的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問題

回答

相關問題