關於css中列表(ul ol)存在默認間距的問題


一、總結:

有時候我們要給列表(ul ol 本身就是屬於塊級元素)的上表框或下邊框設置顏色,如下:

 

但是在給內聯塊級元素(inline-block)的上表框或下邊框設置顏色的時候,就沒有這么簡單:

在前輩的博客中了解到:ul或ol中的li與li之間之所以會有間隙,是因為空白符引起的。

因為我們一般都是一行一個li,換行都會產生空白符。上面的日歷也可以看到每個數之間有明顯的間隙。

 

解決辦法:將ul或ol的font-size設置為0,消去空白間隙,重新在給li定義字體的大小。

修改后的效果:

需要注意的是要讓數字之間隔一定距離,通過設置每個li的內邊距來實現效果,用外邊距會實現和上面那種邊框之間不連續的效果。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM