CSS - 防止菜单进入第二行答案

【问题标题】：CSS - prevent menu from breaking onto second lineCSS - 防止菜单进入第二行
【发布时间】：2015-02-27 02:29:35
【问题描述】：

当浏览器的宽度约为 1180 时，菜单会中断到第二行。我怎样才能防止它这样做？

【问题讨论】：

【解决方案1】：

您需要将汉堡菜单的断点更改为 1200 像素，或者您可以增加容器的宽度：

.container {
    max-width: 1140px;
}

【讨论】：

【解决方案2】：

那是因为你的断点将.contaner div-s 的宽度设置为 970px。现在你有两个选择：

【讨论】：

【解决方案3】：

汉堡菜单是您在网站上的断点达到 1100 像素时使用按钮显示导航的菜单。由于 3 条水平线相互重叠，因此称为汉堡菜单。

正如 DNReNTi 所说，您可以这样做，但要保持您选择的布局，最好您可以将断点更改为更宽容或应用以下样式更改：

.cap-header-fixed .menu > li, .cap-primary-menu .menu > li {
display:inline-block;
padding: 0 8px;
}

另请注意，您已将菜单图标（汉堡菜单）设置为（显示：块；）仅出现在@media 屏幕和（最大宽度：1100 像素）和（最小宽度：0 像素）以及要显示的主菜单在@media（最小宽度：1100px）。将此更改为 1101 像素，否则您会发现在 1100 像素时，汉堡和桌面菜单都会显示。

希望这会有所帮助:)

【讨论】：