昨天發(fā)布了《純CSS ul li前綴點(diǎn)(圓點(diǎn)、正方形點(diǎn)等)加顏色和變色(不使用背景圖)》

可能很多人喜歡使用ul li自帶的前綴點(diǎn)作為前綴圖標(biāo)，而不是使用背景圖片的方式，這樣省去了做圖也能為網(wǎng)頁(yè)提速，特別是各種標(biāo)題中使用 ul li的前綴點(diǎn)！

實(shí)際上用了overflow:hidden 會(huì)影響 list-style，即當(dāng)ul 中的li 的overflow 為hidden的時(shí)候， list-style不起作用，不顯示前面的點(diǎn)、圈等樣式。

但同時(shí)，標(biāo)題因?yàn)殚L(zhǎng)度不一，所以不得不使用overflow:hidden隱藏?fù)Q行，但此時(shí)ul li的前綴點(diǎn)就消失不見(jiàn)了，使用位移調(diào)整失效！

那么如何解決overflow:hidden導(dǎo)致ul li前綴點(diǎn)消失的問(wèn)題呢？

方法一、不使用overflow:hidden，li不要設(shè)置高度，讓其自由換行（這個(gè)。。。可能真的不太符合）

方法二、在ul或li內(nèi)加入樣式：list-style-position: inside; 即可。注意適當(dāng)調(diào)節(jié)padding位置使之最適合。

擴(kuò)展：

列表的樣式：
disc :　CSS1　實(shí)心圓
circle :CSS1　空心圓
square :CSS1　實(shí)心方塊
decimal :　 CSS1　阿拉伯?dāng)?shù)字
lower-roman :　 CSS1　小寫羅馬數(shù)字
upper-roman : CSS1　大寫羅馬數(shù)字
lower-alpha : CSS1　小寫英文字母
upper-alpha : CSS1　大寫英文字母
none :　CSS1　不使用項(xiàng)目符號(hào)
armenian :　CSS2　傳統(tǒng)的亞美尼亞數(shù)字
cjk-ideographic:CSS2　淺白的表意數(shù)字
georgian :　CSS2　傳統(tǒng)的喬治數(shù)字
lower-greek :　 CSS2　基礎(chǔ)的希臘小寫字母
hebrew : CSS2　傳統(tǒng)的希伯萊數(shù)字
hiragana : CSS2　日文平假名字符
hiragana-iroha: CSS2　日文平假名序
katakana : CSS2　日文片假名字符
katakana-iroha: CSS2　日文片假名序號(hào)
lower-latin : CSS2　小寫拉丁字母
upper-latin : CSS2　大寫拉丁字母
*list-style-image: url(images/disc.gif); 用圖像disc.gif代替列表項(xiàng)目顯露
*list-style-position : outside | inside
outside: 　列表項(xiàng)目標(biāo)記放置在文本以外，且圍繞文本不根據(jù)標(biāo)記對(duì)齊
inside : 　列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且圍繞文本根據(jù)標(biāo)記對(duì)齊