Navigationsleiste nicht gleiche Breite wie Container

Ich bin sehr neu zu Web-Dev und das ist die erste Website, die ich baue.Navigationsleiste nicht gleiche Breite wie Container

Ich habe eine Weile in der Navigationsleiste ausgegeben, aber ich kann nicht die Breite der Bar das Ende des Behälters zu erreichen. Ich habe ein Bild eingefügt, um das Problem zu zeigen, das ich habe.

1 Die Bilder und navbar beide innerhalb des Behälters, aber ich würde beide gerne aufgereiht werden.

HTML & CSS:

<html> 
 
     <body> 
 
     \t \t <div class="header"> 
 
     \t \t \t \t <div class="container"> 
 
     \t \t \t \t \t <div class="logo"></div> 
 
     \t \t \t \t \t <div id="nav"> 
 
     \t \t \t \t \t \t <ul> 
 
     \t \t \t \t \t \t \t <li><a class="active" href="#index">Home</a></li> 
 
     \t \t \t \t \t \t \t <li><a href="#news">News</a></li> 
 
     \t \t \t \t \t \t \t <li><a href="#music">Music</a></li> 
 
     \t \t \t \t \t \t \t <li><a href="#about">About Us</a></li> 
 
     \t \t \t \t \t \t \t <li><a href="#contact">Contact Us</a></li> 
 
     \t \t \t \t \t \t </ul> 
 
     \t \t \t \t \t </div> 
 
     \t \t \t \t \t <div class="cover"></div> 
 
     
 
     \t \t \t \t </div> 
 
     
 
     
 
     \t \t </div> 
 
     \t <!-- Latest compiled and minified JavaScript --> 
 
     \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
      
 
      <style type="text/css"> 
 
      
 
      body { 
 
     \t background-color: #505290 !important; 
 
     } 
 
     
 
     .header { 
 
     \t background-image: url(nlbg.jpg); 
 
     \t background-size: cover; 
 
     \t background-position: center center; 
 
     \t height: 10em; 
 
     \t width: 100%; 
 
     
 
     } 
 
     
 
     .logo { 
 
     \t content: url(nnlogo.png); 
 
     \t height: 120px; 
 
     } 
 
     
 
     #nav ul { 
 
      list-style-type: none; 
 
      background-color: #333; 
 
      text-align: center; 
 
      padding: 0; 
 
      margin: 1.4em; 
 
     } 
 
     
 
     #nav li { 
 
      font-family: arial, sans-serif; 
 
      font-size: 1.5em; 
 
      line-height: 40px; 
 
      height: 40px; 
 
      display: inline-block; 
 
      width: 19%; 
 
     } 
 
     
 
     #nav a{ 
 
      display: block; 
 
      color: white; 
 
     } 
 
     
 
     #nav a:hover { 
 
      background-color: #111; 
 
     } 
 
     
 
     #nav a.active { 
 
      background-color: #black; 
 
      color: #505290; 
 
     } 
 
     
 
     .cover { 
 
      content: url(cover.jpg); 
 
     
 
     } 
 
      
 
      </style> 
 
     </body> 
 
    </html>

Quelle

2017-08-31 ThatWain

Rand 0 auf Ul. –

Es ist, weil Sie einen top/left/bottom/right Marge von 1.4em auf Ihrem navbar haben. Wenn Sie die top/bottom Marge halten wollen, setzen Sie es einfach margin:1.4em 0; die left/right Marge auf Null aus.

body { 
 
    background-color: #505290 !important; 
 
} 
 

 
.header { 
 
    background-image: url(nlbg.jpg); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    height: 10em; 
 
    width: 100%; 
 

 
} 
 

 
.logo { 
 
    content: url(nnlogo.png); 
 
    height: 120px; 
 
} 
 

 
#nav ul { 
 
    list-style-type: none; 
 
    background-color: #333; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 1.4em 0; 
 
} 
 

 
#nav li { 
 
    font-family: arial, sans-serif; 
 
    font-size: 1.5em; 
 
    line-height: 40px; 
 
    height: 40px; 
 
    display: inline-block; 
 
    width: 19%; 
 
} 
 

 
#nav a{ 
 
    display: block; 
 
    color: white; 
 
} 
 

 
#nav a:hover { 
 
    background-color: #111; 
 
} 
 

 
#nav a.active { 
 
    background-color: #black; 
 
    color: #505290; 
 
} 
 

 
.cover { 
 
    content: url(cover.jpg); 
 

 
}

<body> 
 
     <div class="header"> 
 
       <div class="container"> 
 
        <div class="logo"></div> 
 
        <div id="nav"> 
 
         <ul> 
 
          <li><a class="active" href="#index">Home</a></li> 
 
          <li><a href="#news">News</a></li> 
 
          <li><a href="#music">Music</a></li> 
 
          <li><a href="#about">About Us</a></li> 
 
          <li><a href="#contact">Contact Us</a></li> 
 
         </ul> 
 
        </div> 
 
        <div class="cover"></div> 
 

 
       </div> 
 

 

 
     </div> 
 
</body>

Quelle

2017-08-31 16:20:09 APAD1

Haha ich bin erstaunt, wie einfach das war, verbrachte mehr als i‘ Ich möchte auch zu diesem Problem zugeben lol Danke für die Hilfe! – ThatWain

Sie sind herzlich willkommen! Denken Sie daran, dass "ungeordnete Listen" standardmäßig vom Browser mit "margin" versehen werden. Wenn Sie sie also für die Navigation verwenden, sollten Sie diese Standardmarge abbrechen oder überschreiben. – APAD1

-1

Versuchen Sie, die Marge auf dem ul Einstellung:

body { 
 
    background-color: #505290 !important; 
 
} 
 

 
.header { 
 
    background-image: url(nlbg.jpg); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    height: 10em; 
 
    width: 100%; 
 
} 
 

 
.logo { 
 
    content: url(nnlogo.png); 
 
    height: 120px; 
 
} 
 

 
#nav ul { 
 
    list-style-type: none; 
 
    background-color: #333; 
 
    text-align: center; 
 
    padding: 0; 
 
    /*margin: 1.4em;*/ 
 
} 
 

 
#nav li { 
 
    font-family: arial, sans-serif; 
 
    font-size: 1.5em; 
 
    line-height: 40px; 
 
    height: 40px; 
 
    display: inline-block; 
 
    width: 19%; 
 
} 
 

 
#nav a { 
 
    display: block; 
 
    color: white; 
 
} 
 

 
#nav a:hover { 
 
    background-color: #111; 
 
} 
 

 
#nav a.active { 
 
    background-color: black; 
 
    color: #505290; 
 
} 
 

 
.cover { 
 
    content: url(https://placehold.it/800x800); 
 
} 
 

 
ul { 
 
    margin: 0; 
 
}

<div class="header"> 
 
    <div class="container"> 
 
    <div class="logo"></div> 
 
    <div id="nav"> 
 
     <ul> 
 
     <li><a class="active" href="#index">Home</a></li> 
 
     <li><a href="#news">News</a></li> 
 
     <li><a href="#music">Music</a></li> 
 
     <li><a href="#about">About Us</a></li> 
 
     <li><a href="#contact">Contact Us</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="cover"></div> 
 

 
    </div> 
 

 

 
</div>

Quelle

2017-08-31 16:19:58 sol

Wenn Sie nur den Rand entfernen, werden mehr Änderungen als gewünscht vorgenommen. Setzen Sie den Rand-Links-Wert stattdessen auf 0 und lassen Sie den Rest übrig, vorausgesetzt, Sie möchten den Rand rechts oben/unten/rechts. – Daniel

@ Daniel Na gut, aber die Antwort wird es das OP ziemlich offensichtlich machen, was das Problem war, und er kann die Feinabstimmung, wie er will ... – sol

-1

Ihre #nav ul Marge von 1.4em wird auf der linken Seite des nav ul Zugabe Marge. Setze margin-left auf 0.

Quelle

2017-08-31 16:20:18 Daniel

Navigationsleiste nicht gleiche Breite wie Container

Antwort

Verwandte Themen