Question

我有一个菜单：

http://www.spotlesswebdesign.com/dqhendricks/index.html

问题是，当您将窗口调整到足够小时，菜单将开始换行到第二行。我想防止这种情况发生，过去我使用非常相似的CSS而不会出现这个问题。我怎么能阻止它包裹？

以下是一些代码：

HTML

    <div id="nav">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Experiments</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>

CSS

#nav {
    margin: 0 25px;
}

#nav .left {
    float: left;
    width: 9px;
    height: 38px;
    background-image: url('../images/nav/left.png');
}

#nav .right {
    float: right;
    width: 9px;
    height: 38px;
    background-image: url('../images/nav/right.png');
}

#nav .center {
    height: 38px;
    margin: 0 9px;
    background: url('../images/nav/center.png') repeat-x;
}

#nav ul {
    width: 1000px;
    height: 38px;
    margin: auto;
    padding-left: 2px;
    list-style-type: none;
    background: url('../images/nav/divider.png') top left no-repeat;
}

#nav li {
    display: inline;
}

#nav a {
    display: block;
    float: left;
    padding: 0 30px 0 28px;
    height: 38px;
    line-height: 36px;
    text-decoration: none;
    color: #777777;
    background: url('../images/nav/divider.png') top right no-repeat;
}

Answer 1

This is a working example我刚试过。

将white-space: nowrap;添加到#nav .center并将display: inline-block;添加到#nav li。

这两个会阻止导航内容换行并创建新行。

Answer 2

使用min-width允许它与页面一起增长，而不是固定宽度。应该在IE8和所有其他浏览器中工作。 IE6可以烧掉。

Answer 3

添加：

overflow: visible

到#nav

Answer 4

设置包装DIV的大小：

#nav {
    margin: 0 25px;
    width: 1000px;
}

为什么这个菜单包装？

4 个答案: