0

我有个问题。我用 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>

谢谢。

艾萨克

4

3 回答 3

0

如果您不想添加最小宽度（因为您可能事先不知道菜单的内容），您也可以选择带有inline-blocks 的版本并添加white-space: no-wrap以防止换行。像这样的东西：http: //jsfiddle.net/RpVpk/

这些是您的 CSS 中更改的行：

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

不过，我个人更喜欢浮动版本和换行。Nobady 喜欢水平滚动条，并且现在有各种屏幕尺寸……也许您应该考虑响应式并添加一些媒体查询？...

编辑：
为了完全兼容 IE，您可能必须将licss 更改为：

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

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

于 2013-04-15T20:15:17.587 回答
0

只需添加width: [pixels here]到#coolMenu. 将其设置为所需的宽度，以便菜单始终显示为一行。您也可以min-width:根据布局的其余部分使用。

于 2013-04-15T20:07:57.680 回答
0

只需添加min-width：

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

见工作小提琴：最小宽度菜单

于 2013-04-15T20:12:44.970 回答