CSS-Menü (kann die Tabs nicht auf volle Höhe bringen) - html, css, xhtml

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

Ich habe ein kleines Problem damit, da der "Schwebeflug-Hintergrund" nicht 100% der Höhe der Navigationsleiste entspricht.

Antworten:

Das funktioniert auf meiner Maschine:

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

Stellen Sie die Höhe nicht auf das äußerste Element ein. Stellen Sie sie auf das innerste Element ein (erfordert eine Anzeige: Blockieren Sie Ihre a-Regel zusätzlich zur Höhe).

Sie sollten Ihre Polsterung und die Linienhöhe auf die setzen ein Etikett. Die Bereiche werden nicht benötigt, und Sie benötigen auch wirklich keine Auffüllung im Li. Wenn der Benutzer die Textgröße ändert, werden die Schwebeflug-Hintergründe jedoch aus dem Tabe-Bereich heraus angezeigt.

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

Hast du es versucht:

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