Center Ausrichtung Einer Horizontalen Navigationsleiste

Ich habe ein kleines problem ausrichten meine Horizontale Navigationsleiste, um die Mitte des Browsers. Bevor ich nun legte diese Abfrage möchte ich darauf hinweisen, dass ich bin neu in HTML und CSS-so mit mir tragen, auf dem, was ist zweifellos eine schnelle Lösung!

Die Kopf-und Fußzeile sind auf voller Breite mit einem festen Inhalt " in der Mitte des Browsers. Die Navigations-bar zu sitzen unter dem header. Derzeit ist die bar schließt sich auf der linken Seite, aber es wird nicht scheinen zu bewegen ohne seine Form zu verlieren.

HTML:

<body>
<div id="header">
  <div class="wrap">
    <img src="images/logo_header.png" alt="Image alt." />
  </div>
</div>
<div id="nav">
  <div class="wrap">
    <ul>
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
      <li><a href="#">Option 4</a></li>
      <li><a href="#">Option 5</a></li>
      <li><a href="#">Option 6</a></li>
    </ul>
  </div>
</div>
<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>

und CSS:

body {
  margin:0;
  padding:0;
  font-family:verdana;
}
.wrap {
  position:relative;
  margin:0 auto;
  width:960px;
}
#header {
  float:left;
  width:100%;
  background-color:#FFCC33;
}
#nav {
  float:left;
  background-color:#FFCC33;
  border-top:2px solid #000000;
}
#nav ul {
  list-style:none;
  display:inline;
  margin:0px;
  padding:0px;
}
#nav li {
  display:inline;
  line-height:1.8em;
}

InformationsquelleAutor Galeforce | 2011-11-14

  1. 2

    versuchen Sie dies:

    <body>
<div id="header">
  <div class="wrap">
    <img src="images/logo_header.png" alt="Image alt." />
  </div>
</div>
<div class="container">
<div id="nav">
  <div class="wrap">
    <ul>
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
      <li><a href="#">Option 4</a></li>
      <li><a href="#">Option 5</a></li>
      <li><a href="#">Option 6</a></li>
    </ul>
  </div>
</div>
</div>

<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>


.container{width:980px;margin:0 auto;text-align:center;}
.nav{float:left; text-align:left;}

    InformationsquelleAutor MCannon

  2. 1

    Wenn Sie einen Stil von:

    #nav .wrap {text-align:center; }

    Diese wird center richten Sie die nav-links.

    Sehen diese Geige.

    InformationsquelleAutor amelvin

  3. 0

    versuchen, dies zu tun
    Für HTML -

    <nav class="computer">
    <div class="container">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </div>
</nav>

    für css:

    nav{
    width: 100%;
    .container{
        width: 50vw;
        margin: 0 auto;
        ul{
          text-align: center;
          li{
            width: 10vw;
          }
        }
     }
 }

    da hatte ich 5 Dinge, die ich verwendet 50 vw für container und 10 vw für die einzelnen Elemente.. diese richten Sie die Navigationsleiste perfekt zentriert.
    kann mich nicht erinnern, verwenden Sie das meta tag für viewport

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    HINWEIS: ich verwende hier WENIGER für css

    InformationsquelleAutor Mrinal Raj

Schreibe einen Kommentar