CSS中使用list-style-position:outside時清單圖示不顯示的問題解決-css教學-PHP中文網

CSS中使用list-style-position:outside時清單圖示不顯示的問題解決

黄舟

發布： 2017-06-29 10:56:52

原創

2721 人瀏覽過

今天在修改一個網站樣式時，遇到一個問題，無論怎麼調節css屬性，一個文章列表圖標卻一直不顯示，最後把list-style-position:outside改成list- style-position:inside時，清單圖示顯示出來了。為了找出list-style-position:outside不顯示的原因，不斷的嘗試刪除各種css屬性來找出導致outside不顯示的原因，結果卻始終沒有找出來一個確定的答案，不過肯定的是，ul li屬性width:100%、padding:0;會對清單圖示不顯示造成一定的影響，如果你遇到這個問題，請注意這兩個屬性。

css2.0手冊對outside和inside這兩個參數是這樣解釋的：

list-style-position : outside | inside

登入後複製

取值：

##outside:預設值。清單項目標記放置在文字以外，且環繞文字不根據標記對齊

inside:清單項目標記放置在文字以內，且環繞文字根據標記對齊

從上面的定義可以看出padding還是有影響的，不過我這裡具體是哪裡出了問題卻一直找不出來，刪除除width:100%或者padding:0之外的其它樣式，均可以達到顯示的效果。

問題就這樣告一段落，由於樣式需要，我把

list-style-type取decimal阿拉伯數字這個值，當為了滿足列表行超出時不自動換行這一需求時，採用瞭如下三個參數：

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

登入後複製

不過發現列表不以阿拉伯數字來顯示了，全變成了數字1。當把overflow:hidden刪掉時，問題解決了，不過省略號出不來了，於是又學到一個hack，以後得注意了。

以上是CSS中使用list-style-position:outside時清單圖示不顯示的問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！