Css 导航元件也固定在一条线上

当浏览器窗口比全屏小一点时，导航将分为两行。。。 我在导航中有很多元素。。。 你知道怎么让我保持在线吗

CSS:

HTML：（为了更好地理解，我删除了真正的链接）

|
| 
| 
| 
| 
| 
| 

我使用：

• html5
• css3
• DOCTYPE html

谢谢。

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-->

---

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

要获取所需内容，应使用：

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;
}
}

....

导航：悬停ul，导航：活动ul，导航：聚焦ul{
显示：块；
}
导航ul{
明确：两者皆有；
显示：无；
}
海军ulli a{
显示：块；
}
@介质（最小宽度：37em）{
导航当量{
显示：无；
}
导航ul{
显示：块；
}
}

---

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

请同时粘贴标记。我正在使用CSS3在这里发布你的HTML代码。

.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;
}

nav  {
    white-space: nowrap;
}

<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;
}
}