调整浏览器大小时防止浮动的右侧导航栏移动答案

【问题标题】：Prevent floated right nav bar from moving when browser is resized调整浏览器大小时防止浮动的右侧导航栏移动
【发布时间】：2015-04-10 21:31:54
【问题描述】：

我需要确保我的导航栏保持在标题的右侧，以便用户利用水平滚动条访问不可见的导航选项。

目前我的嵌套中有 5 个元素，一旦用户调整浏览器的大小，导航菜单就会跳转/向下移动。

See fiddle here

HTML：

<header> <!-- Navigation menu bar -->
    <a href="#" id="logo"></a>

    <nav>
        <a href="#" id="menu-icon"></a>

        <ul> <!-- Navigation menu bar options. These are fixed in terms of content. -->
            <li><a href="#">My Profile</a></li>
            <li><a href="#">Log Out</a></li>
            <li><a href="#">FAQs</a></li>
            <li><a href="#contactus">Extras</a></li>
      <li><a href="#contactus">Contact Us</a></li>          
        </ul>

    </nav>              
</header>

CSS：

header {
    background-color: #3366FF;
    width: 100%;
    height: 86px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 0.90%;
}

#logo {
    margin: 0px;
    float: left;
    width: 200px;
    height: 86px;
    background: url("../images/logo.png") no-repeat center;
}

nav {
    float: right;
    padding: 20px;
}

#menu-icon {
    display: hidden;
    width: 100px;
    height: 86px;
    background: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
    padding: 0;
    margin: 0;
}   

a:hover#menu-icon {
    border-radius: 2px 2px 0 0;
}

ul {
    list-style: none;
}

nav ul li {
    text-align: center;
    display: inline-block;
    padding: 10px;
}

nav ul li a:hover {
    color: #363636;
    text-decoration: none;
}

【问题讨论】：

标签： html css

【解决方案1】：

我会在您的标题元素上设置一个最小宽度，以防止它变得太窄而无法容纳列表元素，同时保持灵活性。

我试过 min-width:660px;对我来说它似乎工作得很好。

header {
    background-color: #3366FF;
    width: 100%;
    min-width: 660px;
    height: 86px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 0.90%;
}

或者，您可以将导航 css 更改为

nav {
    text-align:right;
    padding: 20px;
}

..然后将标题的“高度”改为“最小高度”。

【讨论】：

标题{背景颜色：#3366FF;最小宽度：660px；宽度：100%；高度：86px；位置：固定；顶部：0；左：0； z 指数：100；不透明度：0.90%； }
你的意思是如上吗？由于导航的行为方式相同..当我将浏览器的宽度重新调整为 800 像素或更少时它会跳跃..这是我更新的小提琴
是的，完全正确。它对我有用。如果您遇到任何问题，请告诉我。
我尝试过的只是一个小提琴，它可以工作，但是当我将它插入我的主页时它奇怪地换行了..这是我整页的小提琴..jsfiddle.net/q46Xz/946
那是因为你的“标题”中的 id=logo 元素太宽了，它把东西推到了下一行。您可以使用的一个巧妙技巧是将 *{outline:1px solid black;} 添加到 CSS 的开头。这为所有元素提供了一个边框，因此您可以查看它们的位置和尺寸。

【解决方案2】：

您必须通过添加特定宽度来消除菜单的自然灵活性。这样，无论浏览器窗口的大小如何，菜单都将保持您想要的宽度，用户必须滚动才能看到它。

您可以使用 JS 通过将标题的宽度设置为一定数量的像素来动态执行此操作，例如，大于加载文档和调整窗口大小时的窗口宽度。

【讨论】：

谢谢.....我会试一试......但是关于如何动态设置标题宽度的任何想法......
你确定我的回答不满意吗？没有JS，只有一行CSS，如果我理解你的Q的话。
Waltur 的回答很好用。我只假设需要滚动条。此外，正如他的小提琴所示，菜单的高度会增加，据我所知，这往往是不可取的，因此在媒体查询中添加了汉堡图标，以确保在正常版本无法容纳时可以访问菜单。至于JS动态设置宽度：获取窗口的宽度，给表头的菜单部分设置一个固定的宽度，然后为菜单的其余部分决定一个设置的宽度，并且，根据窗口的宽度, 用 JS 增加该部分的宽度以保留一些响应性。

【解决方案3】：

您可以使用 CSS 表格显示来对标题中的布局进行排序，并阻止菜单在下方换行。（额外的好处：这完全避免了floats）

header {
    display: table;
}
header #logo, header nav {
    display: table-cell;
    border:1px solid red;
}

https://jsfiddle.net/S5bKq/1277/

至于响应式菜单本身 - 在互联网上快速搜索“响应式菜单”将为您提供一些示例/教程。

【讨论】：