關於li標簽行內顯示的問題
阿新 • • 發佈:2017-07-17
退出 tle ima ext char line white rom ati
在我們實現導航欄的時候,經常要用到ul標簽。
通常,我們是通過給li標簽設置display:inline-block來使其在一行裏顯示,但是這個時候出現了一個很頭疼的問題。
我們先上代碼。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css"media="screen"> * { margin: 0; padding: 0; } html { font-size: 62.5%; } nav { width: 100%; line-height: 3rem; background-color: blue; padding: 0 1.5rem; } ul{ text-align: left; } li { display: inline-block; background-color: red; padding: 0 1.5rem; } </style> </head> <body> <nav> <ul> <li>登錄</li> <li>關於</li> <li>註冊</li> <li>幫助</li> <li>退出</li> </ul> </nav> </body> </html>
將頁面放大以後我們發現,每個li標簽的後面都出現了一點點間隙。這是為什麽呢?
問題的原因所在
筆者寫過一篇關於DOM的文章,在敘述節點分類的時候提到,Chrome、opera等瀏覽器中,把節點與節點之中的空白符(即空格)也視為文本節點。
如圖所示,寫html代碼時為了美觀,寫完每個li標簽都會換行,換行的時候就會產生空白符。
如何解決這個問題呢?
1.寫html代碼時,把所有li標簽寫在一行裏,從根上消除空白符,但是這樣影響代碼閱讀,不易於後期維護。
<body> <nav> <ul> <li>登錄</li><li>哈哈</li><li>嘿嘿</li><li>幫助</li><li>退出</li> </ul> </nav> </body>
2.還有一個很有意思的方式,就是li標簽不閉合,讓其自動補全,也是可以清除空白。
<body> <nav> <ul> <li>登錄 <li>哈哈 <li>嘿嘿 <li>幫助 <li>退出 </ul> </nav> </body>
3.還可以給li標簽一個負邊距來抵消空白符的寬度,但是有一個缺點,就是空白符的大小跟父節點ul標簽有關,而ul標簽又跟瀏覽器有關,所以負邊距的大小不好確定。
<style> li{margin-left:-3px;} </style>
4.既然空白符大小跟ul標簽有關,那我們可以把ul標簽的字體大小設置為0,再給li標簽設置實際字體大小,這樣就可以使空白符的大小為0。
<style> ul{font-size:0;} li {font-size : 1.2rem;} </style>
5.css4草案中有一個新增屬性:white-space-collapsing,也可以解決這個問題,但是現在幾乎沒有瀏覽器支持,讓我們展望未來吧。
關於li標簽行內顯示的問題