Gestern habe ich einen Beitrag von GoOs mit UCWEB gesehen: Wer sagte, dass das Float -Menü nicht horizontal zentriert werden kann? Und ein kleiner Hack.
Ich habe hier einen einfacheren Weg, zeigen Sie es zuerst:
Eigentlich sollte ich draußen noch eine DIV haben, aber ich gab es auf, um die Kohlenstoffemissionen zu verringern.
Führen Sie die Codebox aus
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
Körper {Schriftfamilie: Verdana, Arial, sans-serif; Schriftgröße: 12px; Rand: 120px Auto; Text-Align: Center;}
UL {Margin: 0; Padding: 0; Listenstil: Keine;}
#Navigation {Display: Inline-Block; Grenze: Solid 1px rot; Polsterung: 20px;}
#Navigation li {Höhe: 30px; float: links;}
#Navigation li a {float: links; Höhe: 30px; Linienhöhe: 30px; Padding: 0 23px; Hintergrund:#97c099;}
#Navigation Li a: Hover {Hintergrund:#59c099; Farbe: #ffff;}
</style>
<!-[wenn lte dh 7]> <style type = "text/css">#navigation {display: inline;} </style> <! [endif]->
<title> Float -Menüraum in einer Methode </title>
</head>
<body>
<ul id = "navigation">
<li> <a href = "#"> home </a> </li>
<li> <a href = "#"> news </a> </li>
<li> <a href = "#"> store </a> </li>
<li> <a href = "#"> Gruppe </a> </li>
<li> <a href = "#"> Community </a> </li>
<li> <a href = "#"> help </a> </li>
</ul>
</body>
</html>
[Strg+A Alle Auswahltipps: Sie können zuerst einen Code ändern und dann Run drücken]
Das Wichtigste ist dieser Satz:
<!-[wenn lte dh 7]> <style type = "text/css">#navigation {display: inline;} </style> <! [endif]->
Um sich um die untere Version von IE zu kümmern, werden hier bedingte Anmerkungen verwendet.
Die Schiebetürnavigation entwickelt sich aus dem obigen Code:
Führen Sie die Codebox aus
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
Körper {Schriftfamilie: Verdana, Arial, sans-serif; Schriftgröße: 12px; Rand: 120px Auto; Text-Align: Center;}
UL {Margin: 0; Padding: 0; Listenstil: Keine;}
#Navigation {Display: Inline-Block; Polsterung: 20px; Rand: Solid 1px rot;}
#Navigation li {Höhe: 30px; float: links;}
#Navigation li a {float: links; Hintergrund:#97c099 URL (<a href = ") Links oberes No-Repeat; Padding-Links: 27px; Höhe: 30px; Überlauf: Hidden;}
#Navigation li a span {Höhe: 30px; float: links; Hintergrund: URL (<a href = ") rechts -352px No-Repeat; Padding-Right: 27px; Linienhöhe: 33px; Cursor: Hand;}
#Navigation Li A: Hover,#Navigation Li.Current a {Hintergrundposition: links -176px; Farbe:#009; Hintergrundfarbe:#8597b5;}
#Navigation Li A: Hover Span,#Navigation li.Current a span {Hintergrundposition: rechts -528px;}
#Navigation li.current a {Schriftgewicht: BOLD;}
</style>
<!-[wenn lte dh 7]> <style type = "text/css">#navigation {display: inline;} </style> <! [endif]->
<title> Update zum Schiebetürstil gemäß dem obigen Code </title>
</head>
<body>
<ul id = "navigation">
<li> <a href = "#"> <span> home </span> </a> </li>
<li> <a href = "#"> <span> news </span> </a> </li>
<li class = "current"> <a href = "#"> <span> Store </span> </a> </li>
<li> <a href = "#"> <span> Gruppe </span> </a> </li>
<li> <a href = "#"> <span> Community </span> </a> </li>
<li> <a href = "#"> <span> Hilfe </span> </a> </li>
</ul>
</body>
</html>
[Strg+A Alle Auswahltipps: Sie können zuerst einen Code ändern und dann Run drücken]
Unter ihnen ist es notwendig, diese beiden Sätze zu erklären, um nicht als redundant zu sein:
#Navigation li a {Überlauf: versteckt;} /* verbergen die zusätzlichen 3px, die IE5.5 und 6, kein 3px -Fehler ist! Weil die Höhe: 30px; Linienhöhe: 33px; */
#Navigation li a span {cursor: Hand;}/* Kümmere dich um die Fehler, die die Maus auf der Spannweite nicht wie eine Handform aussieht. Außerdem unterstützt IE5.5 Cursor: Zeiger;
Nach Abschluss ist der Nachteil, dass das Schreiben einer Reihe bedingter Kommentare wie der Sand in Ihren Augen für diejenigen ist, die eine XHTML -Morbidität haben. hehe!
In Safari4, Chorme, Opera10, IE5.5, 5, 6, 7, FF3 wurden keine Probleme gefunden.