水平HTML列表会垂直

所以，我一直在努力创建我的网站水平导航栏。我继续前进，在Chrome，Firefox和Safari中测试它 - 它运行良好。然后我的朋友说干就干，在Internet Explorer中测试了它，这事发生了 - http://api.browsershots.org/png/original/d8/d84069e1bba73593afc0764935a2aa6d.png 水平HTML列表会垂直

（是的，我知道这是不是IE，但它是100％相同，他的遭遇）

上的联系导航栏正被压入垂直列表中。这是为什么\

CSS -

div#menu 
{ 
    background-repeat: repeat-x; 
    width: 100%; 
    height: 50px; 
    left: 0px; 
    top:0px; 
    position: fixed; 
    z-index: 1000; 
    background: url("../Images/NavBar.png"); 
} 

div#navBar 
{ 
    width:1000px; 
    height:50px; 
    position:fixed; 
    zindex:1001; 
    left:50%; 
    margin-left: -500px; 
} 

ul#menuItems 
{ 
    background:none; 
    height:50px; 
    width:1000px; 
    margin:0; 
    padding:0; 
} 

ul#menuItems li 
{ 
    display:inline-block; 
    list-style:none; 
    margin-left:auto; 
    margin-right:auto; 
    top:0px; 
    height:50px; 
    padding-right:10px; 
    min-width:65px; 
}

HTML -

<div id="menu"> 
    <div id="navBar"> 
     <ul id="menuItems"> 
      <li> 
       <a href="index.php">Home</a> 
      </li> 
      <li> 
       <a href="index.php">DJ Profiles</a> 
      </li> 
      <li> 
       <a href="#">Chat Room</a> 
      </li> 
      <li> 
       <input name="searchField" type="text" value="Search Users" size="60" maxlength="150" id="SearchBox"/> 
      </li> 
      <li> 
       <a href="#">Login to S4NR</a> 
      </li> 
<!--   <li id="userInfo"> 
       <p align="center" style="font-size:11px;">Welcome, Username.</p> 
      </li>--> 
     </ul> 
    </div> 
</div>

来源

2013-04-04 Christopher Orchard

因为旧的IE-S不关心'显示：内联block'。你必须漂浮你的菜单项'float：left' – 2013-04-04 17:56:38

只是一个提示：你不需要固定位置已经固定定位的Parants的元素。 – 2013-04-04 17:59:06

Zoltan是正确的。加上列表样式没有在UL本身，我相信。也可以帮助设置李项目的宽度。在Chrome检查器或类似的地方玩弄它... – 2013-04-04 18:02:14

如上所述，内联块可以与旧IE的一个问题，但是这还不是全部的去错在这里，并诚实地取决于你在哪里你是大多数地方你不必担心IE5,6，甚至可能是7。

ul#menuItems li 
{ 
    display:inline-block; 
    list-style:none; 
    margin-left:auto; 
    margin-right:auto; 
    top:0px; 
    height:50px; 
    padding-right:10px; 
    min-width:65px; 
}

大多数浏览器都将采取与灵活的利润率和灵活的宽度以上的组合冲突。几乎总是你会最终得到接近100％的导航条宽度的元素。如果你知道你肯定会多少列表项有，我建议给他们一个固定或百分比基于宽，去掉边距的属性，并与中心的text-align: center;内部链接这将使你少得多的头痛同样的效果。

如果你决定尝试修复旧的IE浏览器，添加float: left; position: relative;

来源

2013-04-04 18:03:53 runspired

水平HTML列表会垂直

回答

相关问题