为什么这个菜单会换行？

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;
}

- dqhendricks

Answer 1

这是我刚测试过的一个工作示例。

在#nav .center中添加white-space: nowrap;，并在#nav li中添加display: inline-block;。

这两个属性可以防止导航内容换行并创建新行。

- John Godspeed

---

谢谢你的回答。我本来会用这个，但是意识到min-width会更好，因为我想保留最小宽度并固定换行。 - dqhendricks

Answer 2

使用min-width让其能够随页面增长而不是固定宽度。在IE8和所有其他浏览器中应该都可以正常工作。IE6可以去烧了。

- Guttsy

Answer 3

添加：

overflow: visible

到 #nav

- Martin

---

什么浏览器？在FF6中工作。 - Martin

Answer 4

设置包裹 DIV 的大小：

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

- Diodeus - James MacFarlane

---

或者，作为替代方案，使用 min-width 使其能够随着页面增长而增长，而不是固定宽度。 - Guttsy

我无法做到。我希望包装 div 可以延伸到页面边缘，而不受大小的限制。 - dqhendricks

@dqhendricks 已提交为答案 :) - Guttsy