Question

当浏览器窗口比全屏小一点时，导航分为两行...... 我在导航中有很多元素...... 任何想法如何留在一条线上？

CSS：

nav {
    position : absolute;
    top : 10%;
    left : 8%;
    background : #A2A2A2;
    width : 80%;
    height:5%;
    font-size : 20px;
    margin-left : 2%;
    box-shadow : 0 4px 2px -2px gray;
    text-align: center;
}

HTML :(我删除了真正的链接以便更好地理解）

    <nav>|
            <a id="active" class="meniu" href="#">Home</a> | 
            <a class="meniu" href="el2/">Element 2</a> | 
            <a class="meniu" href="el3/">Element 3</a> | 
            <a class="meniu" href="el4/">Element 4</a> | 
            <a class="meniu" href="el5/">Element 5</a> | 
            <a class="meniu" href="el6/">Element 6</a> |&nbsp;
        </nav>

我用：

HTML5
CSS3
DOCTYPE html

感谢。

Answer 1

HTML：

<nav class="primary-nav" role="navigation">
    <ul class="primary-nav-list">
        <li><a href="#" title="Item 1">Item 1</a></li>
        <li><a href="#" title="Item 2">Item 2</a></li>
        <li><a href="#" title="Item 3">Item 3</a></li>
    </ul><!--//END .primary-nav-list-->
</nav><!--//END .primary-nav-->

CSS：

.primary-nav-list {
    list-style: none;
    text-align: center;
}

.primary-nav-list > li {
    display: inline-block;
}

.primary-nav-list > li > a {
    padding: 5px 8px;
    background: #cccccc;
    display: block;
    text-decoration: none;
}

.primary-nav-list > li > a:hover {
    background: #f9f9f9;
}

如果父容器设置为百分比，并且窗口的宽度会影响内联“li”元素的组合宽度，则它们将下降到下一行。我建议使用媒体查询来检测浏览器的宽度并重新组织元素（响应），或者将固定宽度设置为父容器。

Answer 2

为了获得你想要的东西，你应该使用：

nav  {
    white-space: nowrap;
}

我认为这不是最好的方法。我建议你使用响应式布局。从移动视图开始，您应该为Web应用程序实现CSS规则。

以下是一个例子：

<nav>
    <a href="#" id="equiv">&equiv;</a>
    <ul>
        <li><a href="#">link1</a></li>
        ....
    </ul>
</nav>

nav:hover ul, nav:active ul, nav:focus ul {
    display: block;
}

nav ul {
    clear:both;
    display: none;
}

nav ul li a {
    display: block;
}

@media (min-width: 37em) {

nav #equiv {
    display: none;
}

nav ul {
        display: block;
}
}

您可以隐藏菜单，显示用于打开/关闭菜单的菜单按钮，适用于所有移动设备，并使用媒体查询在其他设备（平板电脑，桌面）中显示该菜单。

导航元素修复也停留在一行

2 个答案: