html - 导航栏故障

标签 html css nav

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

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

再次感谢小伙伴们

最佳答案

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

关于html - 导航栏故障,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12306572/

相关文章:

css - 从 div 的底部删除框阴影?

html - 背景图片不会显示在标题中?

html - 为什么该段落隐藏在导航栏后面,但导航栏在 html 源代码中排在第一位?

html - 全宽导航栏,居中,带内容区域

html - 当文本变长时,它会改变我的形式,也很难在正确的位置安装 div

html - 'textarea' 内的样式文本

javascript - 使用 Jquery 创建多步骤模态

html - 仅为页面的一半生成正文框

java - Android:可绘制图像作为字符串中 img 标签的 src

html - 类覆盖 Main 标签