0

所以，我一直在尝试为我的网站创建一个水平导航栏。我继续，在 Chrome、Firefox 和 Safari 中对其进行了测试——效果很好。然后我的朋友继续在 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>
4

1 回答 1

0

如上所述，inline-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;

于 2013-04-04T18:03:53.580 回答