Zentrum ein horizontales CSS-Menü
Ich habe ein CSS-Menü mit dem folgenden CSS.
Was ist der beste Weg, um den Mittelpunkt der gesamten Menü auf der Seite?
Habe ich versucht, mit einem anderen <div>
außerhalb <nav>
und das festlegen von Rändern aber seine nur ausrichten Links die ganze Zeit.
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
jsfiddle : http://jsfiddle.net/njuVm/
InformationsquelleAutor user2710234 | 2013-09-17
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie center die Navigationsleiste mit den folgenden CSS-Regeln:
Siehe demo unter: http://jsfiddle.net/audetwebdesign/DP6Ax/
Der Schlüssel ist, um
display: inline-block
fürnav ul
, damit Ihrtext-align: center
Regel wirksam.Stellen Sie sicher, dass null-Margen und Polster auf der
ul
undli
Elemente. Alles, was du getan hast, war mehr oder weniger Recht, so sollten Sie gut sein.InformationsquelleAutor Marc Audet
Ersten, wenn Sie schweben die
ul
's müssen Sie deaktivieren Sie das float durch hinzufügenclear
div:HTML :
CSS :
Sowie für die Zentrierung der Menü-geben Sie eine Breite der
ul
wie im Beispiel und zufällig habe ich die Breite auf560px
:Einen Blick:
http://jsfiddle.net/njuVm/6/
InformationsquelleAutor Saif Lacrimosa