Question

下面是我的网站导航div的示例当我减小窗口的大小时，其他链接会在下一行上进行，而不是固定到其他位置。这就是cose和css。

<html>
<head>
   <title>test page</title>    
   <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>

<div id=navigation>
<ul id="navigation-bar">
  <li><a href="index.html">Home</a></li>
  <li><a href="gallery.html">Gallery</a></li>
  <li><a href="popup.htm">Images</a></li>
  <li><a href="softwares.html">Softwares</a></li>
  <li><a href="contact.html">Contact</a></li>
  <br><br>
</ul>
</div>

</body>
</html>

这是css

div#navigation {
width:100%;
background-color:#000;
border-top:2px solid #5d6869;
border-bottom:2px solid #5d6869;
}

#navigation-bar {
  list-style: none;
  margin: 0px;
}

#navigation-bar li {
  display: inline;
  float: left;
}

#navigation-bar li a {
  padding: 0em 1em 0.08em 1em;
  text-decoration: none;
  color:#fff;
  font-size:1.8em;
}

#navigation-bar li a:hover {
  text-decoration: none;
  color:#fff;
  background:#5d6869;
}

任何人都可以帮我解释原因吗？

Answer 1

这是因为您的li元素向左浮动。浮动元素，当父级宽度不足以适合时，会自动移动到下一行。这是他们内置的行为

如果您希望它们保持在同一条线上并在父线不够宽时隐藏，您可以给它们display:inline-block并给父母一个设定的高度，比如height:35px;，还有给父母overflow:hidden;

该方法的

Demo Here

根据您的评论

编辑

在这种情况下，给父母一个min-width。 Demo here

更改窗口大小时div内容不对齐

1 个答案: