html - CSS メニュー (タブをフルハイトにできません)

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 に display:block が必要です)。

Answer 4

パディングと行の高さをタグに配置する必要があります。スパンは必要ありません。また、li のパディングも実際には必要ありません。ただし、ユーザーがテキスト サイズを変更すると、ホバー背景がタブ領域からはみ出します。

<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>