it-swarm.com.de

So richten Sie einen Float zentral aus: left ul/li-Navigationsmenü mit css?

Ich habe also folgendes CSS, um eine horizontale Navigationsleiste anzuzeigen:

.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 stelle ich die Navigationsleiste mittig über dem Titel ein?

26
Adam Taylor

Geben Sie Ihrer .navigation ul eine Breite und verwenden Sie den Rand: 0 auto;

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

Hier ist eine Lösung, bei der die Breite Ihres ul nicht angegeben werden muss.

67
Ben Marini

Um margin:0 auto für etwas zu verwenden, muss es eine definierte Breite haben. Die beste Lösung ist wahrscheinlich:

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

Es gibt einige Einstellungen wie Float und Marge, die sich auf diesen Code auswirken können, um ordnungsgemäß zu funktionieren. Es funktioniert auch in IE7. Ich habe diesen Code von einem Artikel bei CSS-Zauberei erhalten.

.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;
 }
5
Nizam Kazi

Sie können die <li>s auf display: inline setzen und dann text-align: center für <ul> einstellen. Dadurch können Sie den float: left aus den Listenelementen entfernen, und Sie müssen keine feste Breite für die Navigationsleiste haben, als würden Sie margin: 0 auto verwenden.

<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>
2
John Kugelman

Das funktioniert bei mir super! (wenn ich richtig bin: IE7 +)

Geige: 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>
2
Marc
ul {
 display: inline-block;
 text-align: center;
}
1
techloris_109
.navigation ul 
{
  list-style-type: none;
  padding: 0px;
  width: 200px;
  margin: 0 auto;
}
0
Ravi Chauhan

Wenn Sie Ihr floated LI weiterhin in Ihrem Code verwenden möchten, können Sie Folgendes 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>
0
Niente0