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

來源:互聯網
上載者:User
今天在修改一個網站樣式時,遇到一個問題,無論怎麼調節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,以後得注意了。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.