html - 垂直的水平 html 列表

Question

所以，我一直在尝试为我的网站创建一个水平导航栏。我继续在 Chrome、Firefox 和 Safari 中测试它——它运行良好。然后我的 friend 继续在 Internet Explorer 中对其进行测试，结果发生了 - http://api.browsershots.org/png/original/d8/d84069e1bba73593afc0764935a2aa6d.png

(是的，我知道这不是 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>

Answer 1

如上所述，内联 block 可能是旧 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；