Меню 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

Вы должны указать отступы и высоту строки в теге a . Пролеты не нужны, и вам также не нужны никакие отступы в 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>

Answer 3

Не устанавливайте высоту на самом внешнем элементе. Установите его на самом внутреннем элементе (в дополнение к высоте требуется блок display: ваше правило a).

Answer 4

вы пробовали:

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