Question

<style type="text/css">
html, body {
    background: #fff;
    margin: 0;
    padding: 0;
}

#nav {
    font-family: Verdana, sans-serif;
    height: 29px;
    font-size: 12px;
    padding: 0 0 0 10px; /* this is used for something else */
    background-color: #456;
}

#nav ul, #nav ul li {
    list-style: none;
    margin: 0;
    padding: 9px 0 0 0px;
}

#nav ul {
    text-align: center;
}

#nav ul li {
    display: inline;
}

#nav ul li.last {
    margin-right: 0;
}


#nav ul li a {
    color: #FFF;
    text-decoration: none;
    padding: 0px 0 0 20px;
    height: 29px;
}
#nav ul li a span {
    padding: 8px 20px 0 0;
    height: 21px;
}

#nav ul li a:hover {
    background: #789;
}
</style>

<div id="nav">
    <ul>
    <li><a href="/1/"><span>One</span></a></li>
    <li><a href="/2/"><span>Two</span></a></li>
    <li><a href="/3/"><span>Three</span></a></li>
    <li><a href="/4/"><span>Four</span></a></li>
    </ul>
</div>

我有一点问题，因为它不会使“悬停背景”成为导航栏高度的100％。

Answer 1

这适用于我的机器：

<style type="text/css">
html, body {
    background: #fff;
    margin: 0;
    padding: 0;
}

#nav {
    font-family: Verdana, sans-serif;
    height: 29px;
    font-size: 12px;
    padding: 0 0 0 10px; /* this is used for something else */
    background-color: #456;
}

#nav ul, #nav ul li {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0px;
}

#nav ul {
    text-align: center;
    position:relative;
    width:300px;
    margin:0 auto 0 auto;
}

#nav ul li {
    float:left;
}

#nav ul li.last {
    margin-right: 0;
}


#nav ul li a {
    float:left;
    color: #FFF;
    text-decoration: none;
    padding: 9px 0 0 20px;
    height: 20px;

}
#nav ul li a span {
    padding: 8px 20px 0 0;
    height: 20px;
}

#nav ul li a:hover {
    background: #789;
}
</style>

Answer 2

你试过了吗？

#nav ul li a {
    color: #FFF;
    text-decoration: none;
    padding: 0px 0 0 20px;
    height: 29px;
    line-height: 29px;
}

Answer 3

不要在最外面的元素上设置高度。将它设置在最里面的元素上（除了高度之外，还需要在a-rule上显示：阻止）。

Answer 4

您应该将填充和行高放在 a 标记上。不需要跨度，你也不需要任何填充。如果用户更改了文本大小，则悬停背景会从tabe区域中移出。

<style type="text/css">
html, body {
    background: #fff;
    margin: 0;
    padding: 0;
}

#nav {
    font-family: Verdana, sans-serif;
    height: 29px;
    font-size: 12px;
    padding: 0 0 0 10px; /* this is used for something else */
    background-color: #456;
}

#nav ul, #nav ul li {
    list-style: none;
    margin: 0;
    padding: 0px;
}

#nav ul {
    text-align: center;
}

#nav ul li {
    display: inline;
}

#nav ul li.last {
    margin-right: 0;
}


#nav ul li a {
    color: #FFF;
    text-decoration: none;
    padding: 8px 20px 7px 20px;
    line-height:29px;
}

#nav ul li a:hover {
    background-color: #789;
}
</style>

<div id="nav">
    <ul>
    <li><a href="/1/">One</a></li>
    <li><a href="/2/">Two</a></li>
    <li><a href="/3/">Three</a></li>
    <li><a href="/4/">Four</a></li>
    </ul>
</div>

CSS菜单（无法将标签设置为全高）

4 个答案: