Question

当浏览器窗口重新调整大小时，此导航栏会自动重新排列，当窗口变得越来越小时，所有按钮都会从直线水平线逐渐堆叠在一起，逐个堆叠。无论窗户的大小是多少，如何将它们保持在原位并牢牢贴在标题标识的底部？

问题截图： 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>

Answer 1

当你谈论调整大小和重新调整时，你应该已经考虑了百分比的宽度。例如，你有6个li-s，你试图以100％的宽度装配...这意味着每个li应该有16.66％的宽度。从理论上讲，这应该都能很好地完成，但是由于空白，你的问题会持续存在。要解决这个问题，你需要对抗空白。这里参考：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

如果我做对了，你只想让菜单保持相同的大小并保持一致，对吧？因此，您只需为<ul>

添加宽度即可

ul {
  list-style-type: none;
  width: 978px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: inline-block;
  border: 5px solid #0009bc;
}

请在此处查看fiddle。

Answer 3

nav{

 width: 1000px;
 margin: 0 auto;
}

当重新调整浏览器窗口大小时，导航栏按钮堆叠在彼此之上

3 个答案: