0

下面是我的网站导航 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;
}

谁能帮我是什么原因？

4

1 回答 1

0

这是因为您的li元素是向左浮动的。浮动元素，当父元素的宽度不够宽时，会自动移动到下一行。这是他们的内在行为

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

演示这里的方法

根据您在下面的评论进行编辑

在这种情况下，给父母一个min-width. 演示在这里

于 2013-10-09T14:27:42.903 回答