How can I make a navigation bar fill up the whole width of the screen?
Question
I've been trying to make a navbar, but even when I set the width to 100%, it doesn't take up the width. I attached my code here.
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } li { display: inline; float: left; } li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } #nav { display: block; padding: 8px; background-color: #dddddd; }
<ul> <li><a href="index.html" id="nav">Home</a></li> <li><a href="Generator.html" id="nav">Generator</a></li> <li><a href="contact.html" id="nav">Contact</a></li> <li><a href="about.html" id="nav">About</a></li> </ul>
2 answers
solution1
1 ACCPTED 2022-08-30 16:55:16
Remove the default margin on the body or add left:0 to your ul rules:
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } li { display: inline; float: left; } li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } #nav { display: block; padding: 8px; background-color: #dddddd; } body {margin:0;}
<ul> <li><a href="index.html" id="nav">Home</a></li> <li><a href="Generator.html" id="nav">Generator</a></li> <li><a href="contact.html" id="nav">Contact</a></li> <li><a href="about.html" id="nav">About</a></li> </ul>
solution2
0 2022-08-30 17:39:17
*{ box-sizing: border-box; margin: 0; padding:0; } ul{ width: 100vw; height: 10vw; background-color: #003580; display: flex; justify-content:flex-end; align-items: center; } ul li{ background-color: #dddd; border-radius: 3px; padding: 0 2px; margin-right: 10px; list-style: none; }.nav{ color: black; text-decoration: none; font-size: 25px; }
<.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Barra de navegación</title> <link rel="stylesheet" href="./stylos.css"> </head> <body> <header> <ul> <li><a href="index.html" class="nav">Home</a></li> <li><a href="Generator.html" class="nav">Generator</a></li> <li><a href="contact.html" class="nav">Contact</a></li> <li><a href="about.html" class="nav">About</a></li> </ul> </header> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make a container fill whole screen below the navigation bar in Ionic?
EJS: How can I make my content take up the whole screen (e.g. width: 100%)?
How can I make a table fill the whole screen?
How to make my navigation bar fill up entire width of my div
How do I make my navigation bar go across the whole screen?
How to make a banner take up the whole width of the screen CSS
How can I make a div fill the whole possible width after giving margins both to left and right?
How do I resize the buttons of a navigation bar and make it fit the width of the screen?
How could I do a navigation bar that fill the screen?
How can I put two divs next to each other and have it take up the whole width of the screen?
Related Tags