如何让导航栏填满屏幕的整个宽度？
[英]How can I make a navigation bar fill up the whole width of the screen?
问题描述
I've been trying to make a navbar, but even when I set the width to 100%, it doesn't take up the width.
我一直在尝试制作导航栏，但即使我将宽度设置为 100%，它也不会占用宽度。 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 个解决方案
解决方案1
1 已采纳 2022-08-30 16:55:16
Remove the default margin on the body or add left:0 to your ul rules:删除正文上的默认边距或将left:0添加到您的ul规则中：
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>
解决方案2
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在Ionic的导航栏下方使容器填充整个屏幕？ - How to make a container fill whole screen below the navigation bar in Ionic?
EJS：我怎样才能让我的内容占据整个屏幕（例如宽度：100%）？ - 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?
如何使导航栏填满div的整个宽度 - 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?
如何制作横幅占据屏幕CSS的整个宽度 - How to make a banner take up the whole width of the screen CSS
在给左右边距后，如何使 div 填充整个可能的宽度？ - 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?
如何将两个div彼此相邻放置并占据屏幕的整个宽度？ - How can I put two divs next to each other and have it take up the whole width of the screen?
相关标签