css - 导航元素修复太停留在一行

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”元素的组合宽度，它们将下降到下一行。我建议使用媒体查询来检测浏览器的宽度并重新组织元素(响应式)，或者为父容器设置固定宽度。