取消UL和OL符號以及padding和margin後恢復默認值的CSS

原文: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;}  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章