原文:https://www.cnblogs.com/zhaiqianfeng/archive/2012/06/28/4616645.html
之前取消UL和OL符號以及padding和margin,CSS代碼如下:
ul,ol{list-style:none; margin:0px; padding:0px;}
但想恢復默認確費了點力氣!
先解釋一下爲什麼要取消:
- ul,ol開頭這樣寫就是控制所有的ul和ol
- list-style:none; 就是把列表的項目符號取消,不顯示符號,因爲在寫導航的時候不用單獨來取消,並且在輸入文章列表的時候我也不想用默認的一個圓點。
- margin:0px; 在IE裏面列表默認有外邊距,所以設置成0像素,方便控制。
- padding:0px;在火狐裏面列表默認有內邊距,所以設置成0像素,也是未來方便控制。
因爲我一開始就控制了所有的UL和OL,但是後來由於某種需求在某些地方又需要恢復爲默認的樣式,研究了很久終於搞定:
ul{list-style-type:disc; list-style-position:inside;} ol{list-style-type:decimal; list-style-position:inside;}
再解釋一下:
- list-style-type:就是控制列表符號的意思 上面的disc就是圓點 下面的decimal就是阿拉伯數字 開始以爲這樣就可以了,結果一瀏覽還是一樣不會顯示列表符號,最後才發現需要加上這一句
- list-style-position:就是控制列表位置的意思 inside是列表縮進的意思 因爲之前把外邊距和內邊距都設成0像素了 所以一定要加上這一句 才能恢復到默認
這兩句代碼還可以簡寫,如下
ul{ list-style:disc inside;} ol{ list-style:decimal inside;}