html - 放大时保持导航栏的结构

Question

我使用 html 和 css 创建了一个简单的导航栏。它的问题是当放大时，结构会发生变化，因为并非所有链接都可以放在一行中。这是 jsfiddle:http://jsfiddle.net/HamishT/b3Lw4/

如果您无法访问 jsfiddle，这里是代码:

<div id="navBar">
    <ul>
        <li class="nav"><a href="#">HOME</a></li>
        <li class="nav"><a href="#">PRODUCTS</a></li>
        <li class="nav"><a href="#">SERVICES</a></li>
        <li class="nav"><a href="#">CONTACT US</a></li>
        <li class="nav" id="order"><a href="#">ORDER</a></li>
    </ul>
</div>

#navBar {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#5a5a5a;
    font-size:12px;
    font-weight:bold;
    background-color:#eeeeee;
    padding:0.1em;
    box-shadow: 5px 5px 5px #888888;
}

.nav {
    list-style:none;
    display:inline;
    border-left:3px solid;
}

.nav a {
    text-decoration:none;
    color:inherit;
    padding: 0 20px 5px 20px;
}

.nav a:hover{
border-bottom:3px solid;
}

#order {
    float:right;
    color:#E65C00;
}

我试过各种方法，都没有成功。我想知道的一种方法是我是否可以编辑它以便它在不适合时从页面流出(因此一次只能看到导航栏宽度的一部分)，但我似乎无法努力解决它。我认为另一种方法是检测屏幕宽度/缩放并在可用空间太小的情况下完全更改结构，但我不确定这是否可能(我已经调查过，但没有发现任何似乎按照我描述的方式工作。

以防万一它有帮助:我发现的一件事是 float 可能会阻止我解决这个问题。

有什么方法可以解决这个问题，如果可以，如何解决？我不介意它是如何工作的(例如，流出屏幕或缩小整个导航栏)，只要它能工作即可。我已经坚持了三天了(我对这一切还是陌生的)所以任何帮助都将不胜感激。

Answer 1

问题是因为 float 正在考虑导航栏的 100% 宽度。添加一个以像素为单位的宽度来固定导航栏的大小，就像这样

#navBar {
    width: 550px;
}

虽然这会导致元素流出当前窗口(并因此带来滚动条)。在这种情况下，您最好的选择是让内容响应并为不同的宽度创建不同的样式。