如何制作无响应的菜单

Question

如何制作无响应的菜单。例如，我有一个菜单，其中5个li显示为内联，但在某些分辨率下，它们开始相互跳跃。我怎么能阻止他们这样做呢。非常感谢你。

Answer 1

Set a fixed width on the parent container of your menu.

https://jsfiddle.net/Mr_recci/vjdsv2tb/1/

<ul class="main-menu">
   <li>I am a menu item</li>
   <li>I am a menu item</li>
   <li>I am a menu item</li>
   <li>I am a menu item</li>
   <li>I am a menu item</li>
</ul>

.main-menu {
   width: 900px;
}

.main-menu li {
    display: inline;
    padding: 5px 10px;
    background: red;
    margin: 0 5px;
    list-style-type: none;
}

Answer 2

我认为你可以简单地在ul处设置宽度 检查这个小提琴： http://jsfiddle.net/qjm1h2L5/1/

ul{
   width:600px;
}

Answer 3

When working with inline elements, the white-space property allows you to disable line wrapping. It's one of the more oddly-named properties in CSS.

ul { white-space: nowrap; }
li { display: inline; }