调整浏览器窗口大小时出错的水平导航栏

时间:2012-11-29 10:43:14

标签: html css

我的问题是,当我最小化浏览器窗口时,水平导航栏开始回到垂直导航,我不想要这个。我尝试了最小宽度和最大宽度,但它没有帮助我的问题,否则我只是应用它错了。 这是html:

<html>
<head><title></title></head>
<body>
  <!--Navigation Bar-->
  <div id="nav" class="nav">
  <ul>
    <li><a href="#">******</a></li>
    <li><a href="#">*********</a></li>
    <li><a href="#">****</a></li>
    <li><a href="#">***********</a></li>
    <li><a href="#">*********</a></li>
  </ul>
  </div>
  <div id="header"></div>
  <div id="container"></div>
</body>
</html>

我的Css是:

#nav {
  position:fixed;
  text-align:center;
  width:100%;
  height:110px;
}
#nav ul {
  list-style: none;
  display: inline-block;
  text-align:center;
  padding-top:10px;
  font-size:30px;
  font-weight:bold;
}
#nav ul li {
  float:left;
  border-radius:10px;
  display:inline-block;
}
#nav ul li:hover {
  border:2px solid #000000;
  border-radius:10px;
  box-shadow:7px 7px 3.5px #000000;
}
#nav ul li a {
  display: block; 
  padding:10px 70px;
  color: #ff0000;
  text-decoration: none;
}

任何一个能帮助我的人。

1 个答案:

答案 0 :(得分:1)

尝试

#nav { white-space: nowrap; }

如果您真正想要的是强制导航始终保持水平。