ul font-size為0，li設定字型大小後多出下間隙

weixin_33832340發表於2016-09-05

設定橫向佈局的ul li時若li使用display:inline-block會因為換行符而使相鄰的li出現間距

將ul的字型設定為0同時在li中重新設定需要的字型大小可以解決上述問題，但若在下面的情況下，會多出下間隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            line-height: 3rem;
        }
        ul {
            margin: 0;
            padding: 0;
            font-size: 0;
        }
        li {
            list-style: none;
            font-size: 12px;
            display: inline-block;
        }
        a {
            display: inline-block;
            padding: 0 1.5rem;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>123</li>
            <li>123</li>
            <li>123</li>
        </ul>
    </div>
</body>
</html>

ul外面包裹了一個盒子，盒子設定了行高（注意是行高不是高度）而ul又未設定高度，則其高度會隨其父盒子，同時li和ul會有一個下間隙。

解決

  • 不給li設定字型大小，而是在li中再包一層盒子，給內層盒子設定字型大小
  • ul的父盒子不設定行高，而用height代替，之後ul、li高度設定為100%

總的來說，要出現這樣奇怪的現象需要特定的html結構和css樣式結合，只要用別的方式代替實現相同的顯示效果，以此來避免出現這個問題。

相關文章