Question

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

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

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

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

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

Answer 2

我只想在你的标题元素上放一个最小宽度，阻止它变得太窄而不适合列表元素，同时保持灵活性。

我尝试了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%;
}

ALTERNATELY您可以将nav css更改为

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

..然后改变你的标题＆＃34;身高＆＃34;至＆＃34; min-height＆＃34;代替。

Answer 3

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

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

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

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

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

3 个答案: