Wie bekomme ich die Navigationsleiste über die gesamte Breite der Seite HTML CSS

Question

Ich versuche, eine Website zu erstellen und ich habe Probleme, die Menüleiste über die Breite der Webseite zu strecken. Kann jemand bitte helfen? Hier ist meine CSS/HTML für die Menüleiste:

ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding-left: 2px; 
 
    position: fixed; 
 
    top: 0px; 
 
    word-spacing: 2px; 
 
} 
 
li { 
 
    float: left; 
 
    display: inline; 
 
    word-spacing: 2px; 
 
    padding-left: 70px; 
 
    background-color: #610000; 
 
} 
 
#menubar a{ 
 
    display: inline; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
    font-family: PT sans, sans-serif; 
 
    color: #FFDFC1; 
 
    padding-left:0px; \t 
 
} 
 

 

 
#menubar a:hover { 
 
    color: #092601; 
 
    background-color:#610000; 
 
} 
 
#menubar .active{ 
 
    color: #092601; 
 
} 
 

 
body{ 
 
    background-color: #ffffff; 
 
    margin-left: 350px; 
 
}

<div id="menubar"> 
 
    <ul> 
 
     <li><a href="home.html">Home</a></li> 
 
     <li><a href="about.html">About Us</a></li> 
 
     <li><a href="menu.html">Menu</a></li> 
 
     <li><a href="location.html">Location</a></li> 
 
     <li><a href="gallery.html">Gallery</a></li> 
 
     <li><a href="contact.html">Contact Us</a></li> 
 
    </ul> 
 
</div>

Answer 1

li { 
 
    background-color: #610000; 
 
} 
 
#menubar a{ 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
    font-family: PT sans, sans-serif; 
 
    color: #FFDFC1; 
 
} 
 
#menubar a:hover { 
 
    color: #092601; 
 
    background-color:#610000; 
 
} 
 
#menubar .active{ 
 
    color: #092601; 
 
} 
 
ul{ 
 
    padding: 0; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: box; 
 
} 
 
li{ 
 
    list-style: none; 
 
    list-style:none; 
 
    text-align: center; 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: 1; 
 
    box-flex: 1; 
 
} 
 
body { 
 
    margin: 0px; 
 
}

<div id="menubar"> 
 

 
    <ul> 
 
       <li><a href="home.html">Home</a></li> 
 
       <li><a href="about.html">About Us</a></li> 
 
       <li><a href="menu.html">Menu</a></li> 
 
       <li><a href="location.html">Location</a></li> 
 
       <li><a href="gallery.html">Gallery</a></li> 
 
       <li><a href="contact.html">Contact Us</a></li> 
 
    </ul> 
 
</div>

Answer 2

, warum Sie die margin-left für den Körper in Ihrem CSS festgelegt haben entfernen, dass

das könnte Ihnen auch helfen

https://stackoverflow.com/a/11520529/2430556

Answer 3

Um es relativ zu Ihrer Bildschirmgröße zu machen.

Verwenden Sie vw Einheit. So ist es zu passen, machen es 100vw auf ul ..

Dann in Ihrem li .. Entfernen Sie die padding-left there..and dann

eingestellt seine Breite als Breite der Mutter ul geteilt durch die Anzahl der Kinder li ..

width: calc(100%/6);

HINWEIS: calc() Funktion funktioniert nur auf modernen Browsern .. Sie es manuell wollen, wenn Sie einstellen können.

ul { 
 
     list-style-type: none; 
 
    \t margin: 0px; 
 
    \t padding-left: 2px; 
 
    \t position: fixed; 
 
    \t top: 0px; 
 
    \t word-spacing: 2px; 
 
     width: 100vw; 
 
    } 
 
    li { 
 
    \t float: left; 
 
     width: calc(100%/6); 
 
    \t display: inline; 
 
    \t word-spacing: 2px; 
 
    \t background-color: #610000; 
 
    } 
 
    #menubar { 
 
     width: 100%; 
 
    } 
 
    #menubar a{ 
 
    \t display: inline; 
 
    \t text-align: center; 
 
     text-decoration: none; 
 
    \t font-size: 15px; 
 
    \t font-family: PT sans, sans-serif; 
 
     color: #FFDFC1; 
 
     padding-left:0px; 
 
     
 
    \t 
 
    } 
 
    
 
    
 
    #menubar a:hover { 
 
     color: #092601; 
 
    \t background-color:#610000; 
 
    } 
 
    #menubar .active{ 
 
    \t color: #092601; 
 
    } 
 
    
 
    body{ 
 
    \t background-color: #ffffff; 
 
    }

<div id="menubar"> 
 

 
    <ul> 
 
    \t \t <li><a href="home.html">Home</a></li> 
 
    \t \t <li><a href="about.html">About Us</a></li> 
 
    \t \t <li><a href="menu.html">Menu</a></li> 
 
    \t \t <li><a href="location.html">Location</a></li> 
 
    \t \t <li><a href="gallery.html">Gallery</a></li> 
 
    \t \t <li><a href="contact.html">Contact Us</a></li> 
 
    </ul> 
 
</div>

Answer 4

1) Gib HTML und Körperbreite: 100%

2) Geben Sie die ul Breite: 100%

3) Entfernen des Körpers Rand

4) Geben Sie die Hintergrundfarbe statt li und Sie werden den Unterschied

bemerken

html, body { 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color: #ffffff; 
 
} 
 

 
ul { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding-left: 2px; 
 
    word-spacing: 2px; 
 
    background-color: #610000; 
 
} 
 

 
li { 
 
    float: left; 
 
    word-spacing: 2px; 
 
    padding-left: 70px; 
 

 
} 
 

 
#menubar { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
#menubar a { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
    font-family: PT sans, sans-serif; 
 
    color: #FFDFC1; 
 
    padding-left:0px; 
 
} 
 

 

 
#menubar a:hover { 
 
    color: #092601; 
 
    background-color: #610000; 
 
} 
 

 
#menubar .active{ 
 
    color: #092601; 
 
}

<ul id="menubar"> 
 
    <li><a href="home.html">Home</a></li> 
 
    <li><a href="about.html">About Us</a></li> 
 
    <li><a href="menu.html">Menu</a></li> 
 
    <li><a href="location.html">Location</a></li> 
 
    <li><a href="gallery.html">Gallery</a></li> 
 
    <li><a href="contact.html">Contact Us</a></li> 
 
    </ul>

https://jsfiddle.net/35c5b93q/