Question

我有一个问题。我用HTML和HTML编写了一个简单的下拉菜单程序。 CSS和缩小浏览器时，导航菜单项（列表）将被包装（转到下一行）。我怎么能避免呢？这是代码：

<style>


#coolMenu,
#coolMenu ul {
    list-style: none;
}
#coolMenu {
    float: left;
}
#coolMenu > li {
    float: left;
}
#coolMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#coolMenu ul li a {
    width: 80px;
}
#coolMenu li:hover ul {
    display: block;
}


/* Main menu
------------------------------------------*/
#coolMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
}
#coolMenu > li > a {
    color: #fff;
    font-weight: bold;
}
#coolMenu > li:hover > a {
    background: #f09d28;
    color: #000;
}

/* Submenu
------------------------------------------*/
#coolMenu ul {
    background: #f09d28;
}
#coolMenu ul li a {
    color: #000;
}
#coolMenu ul li:hover a {
    background: #ffc97c;
}



</style>



<ul id="coolMenu">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Mauricii</a></li>
    <li>
        <a href="#">Periher</a>
        <ul>
            <li><a href="#">Hellenico</a></li>
            <li><a href="#">Genere</a></li>
            <li><a href="#">Indulgentia</a></li>
        </ul>
    </li>
    <li><a href="#">Tyrio</a></li>
    <li><a href="#">Quicumque</a></li>
</ul>

感谢。

艾萨克

Answer 1

只需将width: [pixels here]添加到#coolMenu的样式中即可。将其设置为您想要的宽度，以便菜单始终显示为一行。您也可以使用min-width:，具体取决于您的布局的其余部分。

Answer 2

只需添加min-width：

#coolMenu {
    float: left;
    min-width: 450px;
}

见工作小提琴：Min-Width Menu

Answer 3

我不想添加最小宽度（因为您可能事先不知道菜单的内容），您也可以使用inline-block s来添加white-space: no-wrap防止换行。像这样的东西： http://jsfiddle.net/RpVpk/

这些是你的css中改变的行：

#coolMenu {
    float: left;
    text-align: left;
    white-space: nowrap;
}
#coolMenu > li {
    display: inline-block;
}

Personaly我更喜欢浮动版和换行。 Nobady喜欢水平滚动条，今天有各种各样的屏幕尺寸...也许您应该考虑采取响应并添加一些媒体查询？...

修改
为了完全兼容IE，您可能需要将li css更改为：

#coolMenu > li { display: inline-block; *display: inline; zoom: 1; }

white-space应该是IE8 +兼容的，根据：http://reference.sitepoint.com/css/white-space，但我没办法测试这个因为我在Mac上......

缩小浏览器时如何避免导航菜单被包装？

3 个答案: