如何讓導航欄橫跨頁面 HTML CSS 的整個寬度

Question

我正在嘗試創建一個網站，但在嘗試讓菜單欄跨過網頁的寬度時遇到了問題。 有人可以幫忙嗎？ 這是我的菜單欄 CSS/HTML：

 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; } #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

為什么你在你的 css 中為 body 設置了 margin-left 刪除它

這也可能對你有幫助

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

Answer 3

使其相對於您的屏幕尺寸。

使用vw單位。 所以為了適應它，在你的ul上設置100vw ..

然后在你的li .. 刪除那里的padding-left ..然后

將其寬度設置為父 ul 的寬度除以子 li 的數量..

width: calc(100%/6);

注意： calc()函數僅適用於現代瀏覽器。如果需要，您可以手動設置它。

 ul { list-style-type: none; margin: 0px; padding-left: 2px; position: fixed; top: 0px; word-spacing: 2px; width: 100vw; } li { float: left; width: calc(100%/6); display: inline; word-spacing: 2px; background-color: #610000; } #menubar { width: 100%; } #menubar a{ display: inline; 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; } body{ background-color: #ffffff; }

 <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 4

1) 給 html 和 body 寬度：100%

2）給ul寬度：100%

3) 去除正文邊距

4) 給 ul 背景色而不是 li ，你會注意到區別

 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/