導航欄故障

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

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

Answer 2

你<li><a>元素被向左浮動，這意味着他們會流溢它們的容器，如果他們不能全部裝入一個單一的線，因爲容器是水平太小。

爲了簡單起見，您只需要隱藏鏈接，而不是爲較小的屏幕實現一些很好的優雅降級（只需確保它在960像素寬的瀏覽器窗口中看起來不錯）。只需將overflow: hidden;款式應用於#nav_header即可。