html - 调整浏览器大小时防止 float 的右侧导航栏移动

Question

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

目前我的嵌套中有 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;
}

Answer 1

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

我试过 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;
}

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