Question

我不知道为什么li标签比代码如下的标签高1px 小提琴http://jsfiddle.net/9Wy8z/

#nav {
width: 100%;
background-color: #5A9AFF;
}

#nav > #nav_container > ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav > #nav_container > ul > li {
    display: inline-block;
    padding: 10px 0;
}

#nav > #nav_container > ul > li > a {
    padding: 10px;
    text-decoration: none;
    color: #1b1b1b;
}

#nav > #nav_container > ul > li > a:hover {
    background-color: #e0e0e0;
}


<div id="nav">
        <div id="nav_container">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>
    </div>

这导致a标签为38px和li 39px，我不确定为什么会这样？

Answer 1

这是因为a元素默认为inline。这就是为什么您必须向li元素添加填充的原因; li取其内容的高度，即inline（它不会计算填充数）。这种方法的问题是li元素也有一些固有的填充，并且它不等于你给a元素的填充。

将a标记设置为display:block;并从li删除填充将通过在a而不是{block中显示inline元素来解决此问题{1}}，并使li仅取a元素的大小（而不是更多）减去您尝试添加补偿的任何强制填充。

JSFiddle

#nav > #nav_container > ul > li {
    display: inline-block;
}

#nav > #nav_container > ul > li > a {
    padding: 10px;
    text-decoration: none;
    color: #1b1b1b;
    display: block;
}

为什么李比儿童标签更高

1 个答案: