Html 放大时保持导航栏的结构

我使用html和css创建了一个简单的导航栏。问题是放大时，结构会发生变化，因为并非所有链接都可以放在一行中。以下是JSFIDLE：

以下是您无法访问JSFIDLE时的代码：

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

#导航栏{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#5A5A；
字体大小：12px；
字体大小：粗体；
背景色：#eeeeee；
填充：0.1米；
盒影：5px 5px 5px#8888888；
}
.导航{
列表样式：无；
显示：内联；
左边框：3倍实心；
}
.导航a{
文字装饰：无；
颜色：继承；
填充：0 20px 5px 20px；
}
.导航a:悬停{
边框底部：3倍实心；
}
#命令{
浮动：对；
颜色：#E65C00；
}

我尝试过各种方法，但都没有成功。我想知道的一个方法是，我是否可以编辑它，使它在不合适的情况下从页面中流出（因此一次只能看到导航栏的一部分宽度），但我似乎无法围绕它工作。我认为另一种方法是检测屏幕宽度/缩放，如果可用空间太小，则完全改变结构，但我不确定这是否可行（我已经研究过了，但没有发现任何像我描述的那样工作的方法）

以防万一：我发现的一件事是浮子可能会阻止我解决这个问题

---

有没有办法解决这个问题？如果有，怎么解决？我不介意它是如何工作的（例如，从屏幕上消失或放大整个导航栏），只要它能工作。我已经在这个问题上坚持了三天了（我还是个新手）因此，任何帮助都将不胜感激。

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

#navBar {
    width: 550px;
}

---

尽管这会导致元素从当前窗口流出（并因此带来滚动条）。在这种情况下，最好的办法是使内容响应并为不同的宽度创建不同的样式。

当您放大页面时，视口的大小正在减小。 这意味着您可以使用媒体查询创建适当的断点：

@media screen and (max-width:600px) {
    #navBar {
        font-size:5px;
    }
}

600px标记在我的测试用例中运行良好。但是您无法通过JSFIDLE复制它。5px不会太小，因为您已经放大了。但是，最好的方法是使用em值而不是px，因为它们允许更改参考字体大小：

body{font size:0.9em；}

。这将被任何其他元素继承。

我找到了一个解决方案（它可能对所有看到这一点的人都没有用处，但却是解决问题的一个备选方案）。我将向右浮动的li元素放在一个单独的div中，以便放大时它不会下降到其他元素的下方或重叠。相反，其他li元素会在重叠之前下降，同时仍能正常工作

在HTML中，#order元素（float right）位于div中，其他li元素位于新div中

<div id="navBar">
    <div>
        <ul>
            <li class="nav" id="order"><a href="#">ORDER</a></li>
        </ul>
    </div>
    <div>
        <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>
        </ul>
    </div>
</div>

---

这里有一个正在工作的JSFIDLE来说明我的意思：

有什么特别的宽度我应该设置吗？我试过了，540稍微太小了，因为订单链接比其他链接稍低，因为它不太合适，但是如果太大，肯定会使它太宽，不适合某些窄屏幕。你必须进行实验，并尝试找到完美的width、 我认为拥有大约545-550应该是好的。在添加代码之前，尝试在控制台中进行快速加载。加载页面时，页面的宽度是否自动适合屏幕宽度，因此像素宽度被用作比例方法？我可能不清楚，但我的意思是，如果将宽度设置为idk 540px，那么在270px的宽度下，无论实际屏幕大小如何，都只占屏幕的一半？不，实际上，元素的宽度取决于其组成部分。如果组成部分可以容纳在小于窗口宽度的范围内，它将尝试这样做。但除非指定，否则它永远不会使组成部分超出当前窗口（除非为每个元素指定位置，否则将导致进一步的问题）。此外，不要试图将屏幕大小与像素混淆。屏幕的分辨率也可以是1366x768，也可以是640x480。对于640x480，240可能是一半大小，但对于1366x768，则不是。我尝试了你的建议，效果不错，但是它不需要根据其他人使用的屏幕大小而有所不同吗？我已经看过/尝试过css media询问了这个答案，但是我仍然无法让它工作…我想我会继续尝试，我发现你的问题是它工作到一定程度，但放大会进一步导致问题再次出现。对此有任何进一步的反馈/建议吗？谢谢。