当浏览器窗口重新调整大小时，这个导航栏会自行重新排列，随着窗口变得越来越小，所有按钮都会从一条水平直线变成一个接一个地堆叠在一起。无论窗口大小如何，如何将它们固定在原位并很好地粘在页眉 Logo 的底部？
问题截图: http://s29.postimg.org/3tnroxls7/Screenshot1.png
目标截图: http://s24.postimg.org/vzuruvqb9/Screenshot2.png
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
}
header img {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 139px;
font-weight: bold;
color: #20dbd4;
background-color: #000000;
text-align: center;
padding: 12px;
text-decoration: underline;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #20dbd4;
color: #000000;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow, noarchive"/>
<title>Grid Design</title>
</head>
<body>
<header>
<img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/>
</header>
<nav>
<ul>
<li><a href="#home">home</a></li>
<li><a href="#news">news</a></li>
<li><a href="#about">about</a></li>
<li><a href="#products">products</a></li>
<li><a href="#photos">photos</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
</body>
</html>最佳答案
如果我没猜错，您只是希望菜单保持相同大小并保持一致，对吗？所以你可以给你的 <ul> 添加一个宽度
ul {
list-style-type: none;
width: 978px;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
参见 fiddle在这里。
关于html - 重新调整浏览器窗口大小时，导航栏按钮会堆叠在一起，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26420908/