[英]How can I make a navigation bar fill up the whole width of the screen?
我一直在嘗試制作導航欄，但即使我將寬度設置為 100%，它也不會占用寬度。 我在這里附上了我的代碼。
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>
刪除正文上的默認邊距或將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>
*{ 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>
如何在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%)?
在給左右邊距后，如何使 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?
如何將兩個div彼此相鄰放置並占據屏幕的整個寬度？
[英]How can I put two divs next to each other and have it take up the whole width of the screen?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.