Question

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

（是的，我知道它不是IE，但它与发生在他身上的情况完全相同）

导航栏上的链接被下推到垂直列表中。这是为什么？\

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

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

水平html列表垂直

1 个答案: