Question

当我更改导航栏的分辨率时，它会出现故障。这是我的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

正如您所看到的，如果您更改分辨率，导航栏就会非常糟糕！

再次感谢男孩和女孩

Answer 1

你的<li><a>元素正在向左浮动，这意味着如果它们不能全部放在一行中，它们会溢出容器，因为容器水平太小。

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

Answer 2

   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;
 }

导航栏故障

2 个答案: