水平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列表會垂直

回答

相關問題