如何使導航欄跨頁面寬度？
[英]How do I get the navigation bar to span the width of the page?
問題描述
到目前為止，我已經看了幾個與該問題非常相似的問題，但仍然找不到我的問題的答案。 （請注意，我是HTML的新手，這是我的第一篇文章）。
我想要一個導航欄，該導航欄跨越頁面的寬度，而不管其上正在查看的屏幕的寬度如何。 我嘗試將的寬度設置為100％，但仍然沒有任何效果。
導航欄的代碼在這里：
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</body>
</html>
您能否幫助我找到一種使導航欄跨越頁面寬度的方法？
謝謝！
5 個解決方案
解決方案1
1 已采納 2015-07-08 19:38:04
如果要將li擴展為相同大小並填充ul的寬度， flexbox可以做到這一點。
現代瀏覽器-Flexbox
nav { width: 100%; background: #333; margin-bottom: 1em; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; display: flex; } li { flex:1 0 auto; } a { display: block; /*width: 60px;*/ background-color: #dddddd; border-color: #ffffff; text-align: center; text-decoration: none; padding:10px 0; margin: 3px; border-radius: 4px; } a:hover { font-weight: bold; background-color: #9b9b9b; } a:active { color: #ff0000; }
<nav> <ul> <li><a href="#home">Home</a> </li> <li><a href="#news">News</a> </li> <li><a href="#contact">Contact</a> </li> <li><a href="#about">About</a> </li> </ul> </nav> <nav> <ul> <li><a href="#home">Home</a> </li> <li><a href="#news">News</a> </li> <li><a href="#contact">Contact</a> </li> <li><a href="#about">About</a> </li> <li><a href="#home">Home</a> </li> <li><a href="#news">News</a> </li> <li><a href="#contact">Contact</a> </li> <li><a href="#about">About</a> </li> </ul> </nav>
替代解決方案：舊瀏覽器-CSS表
nav { width: 100%; background: #333; margin-bottom: 1em; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; display: table; width: 100%; table-layout: fixed; } li { display: table-cell; } a { display: block; /*width: 60px;*/ background-color: #dddddd; border-color: #ffffff; text-align: center; text-decoration: none; padding: 10px; margin: 3px; border-radius: 4px; } a:hover { font-weight: bold; background-color: #9b9b9b; } a:active { color: #ff0000; }
<nav> <ul> <li><a href="#home">Home</a> </li> <li><a href="#news">News</a> </li> <li><a href="#contact">Contact</a> </li> <li><a href="#about">About</a> </li> </ul> </nav> <nav> <ul> <li><a href="#home">Home</a> </li> <li><a href="#news">News</a> </li> <li><a href="#contact">Contact</a> </li> <li><a href="#about">About</a> </li> <li><a href="#home">Home</a> </li> <li><a href="#news">News</a> </li> <li><a href="#contact">Contact</a> </li> <li><a href="#about">About</a> </li> </ul> </nav>
解決方案2
0 2015-07-08 19:01:32
您已經將導航的寬度設置為100％。 現在，嘗試在CSS的LI元素中添加一個寬度，以將其均勻地分布在導航寬度的100％中。
li {
float: left;
width:25%;
}
解決方案3
0 2015-07-08 19:02:24
導航已經是100％寬度，使用此CSS配置。給它一些背景，您將可以看到它。
解決方案4
0 2015-07-08 19:03:14
正確的方法是，導航欄跨越頁面的寬度，但是內部的對象不足以填補空白。 如果您將背景色添加到導航欄中，則可以看到。 您可能會考慮在導航欄中將對象居中對齊，或者將每個對象的寬度擴大到25％
解決方案5
0 2015-07-08 19:04:22
您是否要使nav標簽從窗口邊緣擴展到窗口邊緣？
如果是這樣，您將要去除身體的邊緣：
body {
margin: 0;
}
如何使標題與頁面中心的導航欄對齊？
[英]How do I get my header to align with my navigation bar at the center of my page?
如何在寬度受限元素內顯示跨越頁面寬度的HTML元素？
[英]How do I display HTML elements that span the width of the page inside width-restricted elements?
如何讓導航欄橫跨頁面 HTML CSS 的整個寬度
[英]How to get the navigation bar to stretch across the entire width of page HTML CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.