So richten Sie einen Float zentral aus: linkes UL/li-Navigationsmenü mit CSS?

So habe ich die folgende CSS anstelle eine horizontale Navigationsleiste angezeigt werden mit:So richten Sie einen Float zentral aus: linkes UL/li-Navigationsmenü mit CSS?

.navigation ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.navigation li { 
    float: left; 
    margin: 0 1.15em; 
    /* margin: 0 auto;*/ 
} 

.navigation { 
    /* width: auto;*/ 
    /* margin: 0 auto;*/ 
    text-align: center; 
}

Meine Frage ist: Wie richte ich die Navigationsleiste mittig über dem Titel?

Quelle

2009-06-28 Adam Taylor

Sie rufen auf die Bindestrichseite? Du bist aus diesem Land verbannt. ;) (Scherz! NetHack-Spieler können den ersten Satz erkennen.) –

Geben Sie Ihre .navigation ul Breite und verwenden Sie Marge: 0 auto;

.navigation ul 
{ 
    list-style: none; 
    padding: 0; 
    width: 400px; 
    margin: 0 auto; 
}

Quelle

2009-06-28 15:55:52 Emily

Mit definierter Breite ist das nicht die echte Lösung. Wenn noch ein Listenelement vorhanden ist und die Breite geändert werden muss. Ben Marinis Link ist die richtige Lösung, die ich gefunden habe –

Marinis Antwort sollte als die richtige Antwort markiert werden. –

Sie könnten die <li> ‚s eingestellt display: inline sein, stellen Sie dann text-align: center auf dem <ul>. Wenn Sie das tun, können Sie die float: left aus den Listenelementen entfernen, und Sie müssen keine feste Breite für die Navigationsleiste haben, als wenn Sie margin: 0 auto verwenden würden.

<html> 
    <head> 
    <style> 
     ul { 
     list-style: none; 
     text-align: center; 
     } 

     li { 
     display: inline; 
     margin: 0 1.15em; 
     } 
    </style> 
    </head> 

    <body> 
    <ul> 
     <li>Option 1</li> 
     <li>Option 2</li> 
     <li>Option 3</li> 
    </ul> 
    </body> 
</html>

Quelle

2009-06-28 15:59:05

Nun, margin:0 auto auf etwas zu verwenden, muss es eine definierte Breite aufweisen. Wahrscheinlich die beste Abhilfe ist:

ul li { 
    display: inline; 
    list-style-type: none; 
} 
ul { 
    text-align:center; 
}

Quelle

2009-06-28 16:00:16

Sie können auch 'display: inline-block' verwenden, wenn Sie diese Methode verwenden möchten, aber trotzdem' border', 'background und andere Blockeigenschaften verwenden können. –

Funktioniert das in allen Browsern? Irgendwelche Vorbehalte? – Justin

hier ein solution that doesn't require specifying the width of your ul ist.

Quelle

2009-12-09 17:12:36

Noch besser. Diese Lösung umschließt auch die Elemente, wenn Sie die Größe zu klein ändern. Genau das ist es, wonach ich gesucht habe. – Joe

Das ist echte Lösung nicht das, was Emily gab ... –

Dieser, ich liebe – simPod

Es gibt einige Einstellungen wie Float, Rand, die diesen Code beeinträchtigen können, um ordnungsgemäß zu funktionieren. Es funktioniert auch in IE7. Ich habe diesen Code von an article over at CSS Wizardry.

.navigation ul 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    text-align: center;/*make this change*/ 
} 
.navigation li 
{ 
    float: none;/*make this change*/ 
    display:inline;/*make this change*/ 
    margin: 0 1.15em; 
/* margin: 0 auto; */ 
} 
.navigation li a { 
    display:inline-block;/*make this change*/ 
} 
.navigation 
{ 
    /*width: auto;*/ 
    /*margin: 0 auto;*/ 
    text-align: center; 
}

Quelle

2013-04-30 14:25:28

Dieser funktioniert super mit mir! (wenn ich mich richtig: IE7 +)

Fiddle: http://jsfiddle.net/fourroses666/zj8sav9q/3/

.nav{list-style:none; text-align:center;} 
.nav ul{list-style:none;} 
.nav li{display:inline;} 
.nav a{text-decoration:none; font-size:20px; line-height:20px; display:inline-block;} 

<nav class="nav" role="navigation" aria-label="main navigation"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Menu</a></li> 
    <li><a href="#">Onze producten</a></li> 
    <li><a href="#">Impressie</a></li> 
    <li><a href="#">Media</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav>

Quelle

2014-12-16 14:41:16 Marc

.navigation ul 
{ 
    list-style-type: none; 
    padding: 0px; 
    width: 200px; 
    margin: 0 auto; 
}

Quelle

2015-02-18 04:51:12

Wenn Sie behalten möchten mit Ihrem LI in Ihrem Code schwebte, können Sie diese verwenden:

JSFiddle: https://jsfiddle.net/Lvujttw3/

<style> 
.wrapper { 
    width: 100%; 
    background-color:#80B5EB; 
    text-align: center; 
    } 
.intWrapper { 
    display: inline-block; 
    } 
.mainMenu { 
    padding: 0; 
    min-height: 40px; 
    margin:auto; 
    } 
ul { 
    list-style-type: none; 
    } 
ul li { 
    float: left; 
    font-size: 15px; 
    line-height: 40px; 
    } 
ul li A { 
    display: block; 
    color: white; 
    font-weight: bold; 
    font-family: Arial; 
    text-decoration: none; 
    min-height: 40px; 
    padding: 0 36px; 
    } 
</style> 

<div class="wrapper"> 
    <div class="intWrapper"> 
     <ul class="mainMenu"> 
      <li><a href="one.htm" style='background-color:red'>ITEM ONE</a> 
      </li><li><a href="two.htm">ITEM TWO</a> 
      </li><li><a href="three.htm" style='background-color:red'>ITEM THREE</a>   
      </li> 
     </ul></div> 
    </div> 
</div>

Quelle

2017-02-10 16:42:21 Niente0

ul { 
display: inline-block; 
text-align: center; 
}

Quelle

2017-06-08 07:55:24

-1

style="position: absolute; z-index: 1;"

Quelle

2017-10-05 05:58:48

Bitte fügen Sie weitere Informationen für mehr Klarheit auf Ihre Antwort – CodeChanger

So richten Sie einen Float zentral aus: linkes UL/li-Navigationsmenü mit CSS?

Antwort

Verwandte Themen