0

当我更改导航栏的分辨率时，它会出现故障。这是我的 HTML；

<!--Start header-->
    <div id="header">

        <div id="nav_header">
          <ul id="list-nav">
            <a href="index.htm" id="home">Troll Happy</a>
<li><a href="iphone.htm" id="fail">iPhone Fail</a></li>
  <li><a href="forever.htm" id="alone">Forever Alone</a></li>
  <li><a href="rage.htm" id="rage">Rage Comics</a></li>
  <li><a href="derphina.htm" id="Derp">Derpina</a></li>
  <li><a href="okay.htm" id="okay">Okay face</a></li>
  <li><a href="http://forums.trollhappy.co.uk/xenforo/forum/index.php" id="forums">Forums</a></li>
        </ul>
        </div>
    </div>
<!--End header-->

还有我的 CSS；

    #header {
        height:66px;
        background-color:#000;
            position: absolute;
            width: 100%;
        left:0;
    }




#nav_header {
    height:50px;
    margin-left:100px;
}

ul#list-nav {
  list-style:none;
  margin:20px;
  padding:0;
}

ul#list-nav li {
  display:inline;
  font-family: Century Gothic, sans-serif;
  font-size:13px;
  font-weight:bold;
}

ul#list-nav li a {
  text-decoration:none;
  padding:15px 0;
  width:110px;
  color:#eee;
  float:left;
  text-align:center;
  border-right:1px solid #353535;
}

你可以看到这里发生了什么；

trollhappy.co.uk

如您所见，如果您更改分辨率，导航栏就会出现故障！

再次感谢男孩和女孩

4

2 回答 2

0

您的<li><a>元素正在向左浮动，这意味着如果由于容器水平太小而无法全部容纳在一行中，它们将溢出容器。

为简单起见，您只想隐藏链接，而不是为较小的屏幕实现一些漂亮的优雅降级（只需确保它在 960 像素宽的浏览器窗口中看起来不错）。只需将overflow: hidden;样式应用于#nav_header.

于 2012-09-06T19:29:46.317 回答
0 
   you just small mistakes, it follows;
   u remove the margin-left:100px, insted  margin:0px auto; and set width:840px;
   #nav_header {
    height: 50px;
    margin: 0 auto;
    width: 840px;
   }

   ok i understand the misstake, u set the body tag then work perfectly,,,, 

   body{
       margin:-18px 0px 0px 0px;
    } 


    ok friend on small changes do this,u add the min-width:1000px;

    #header {

   background-color: #000000;
   height: 70px;
   left: 0;
   min-width: 1000px;
   position: absolute;
   right: 0;
 }
于 2012-09-06T19:40:48.377 回答