1. 程式人生 > >關於li標簽行內顯示的問題

關於li標簽行內顯示的問題

退出 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標簽行內顯示的問題