让我感到沮丧的是，一旦重新调整浏览器窗口的大小，这个漂亮的小菜单就会换行。如何防止换行并使其保持固定状态，无论窗口是否调整大小？
#menu {
border-top: 1px solid #FFF;
padding: 0;
margin: 0;
position: fixed;
top: 30px;
left: 0px;
font-size: 8pt;
width: 100%;
}
#menu ul {
padding: 0;
margin: 0;
}
#menu li {
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
#menu li a {
width: 120px;
height: 20px;
display: block;
text-decoration: none;
line-height: 20px;
background-color: #A9BBD3;
color: #FFF;
}
#menu li a:hover {
background-color: #446087;
}
#menu ul ul {
position: absolute;
top: 21px;
visibility: hidden;
}
#menu ul ul li a {
width: 115px;
padding-left: 5px;
}
#menu ul li:hover ul {
visibility: visible;
}
#menu>ul>li>a {
text-align: center;
}
#menu>ul>li>a:hover {
border-bottom: 1px solid #FFF;
}<body>
<div id="menu">
<ul>
<li><a href="#nogo">File</a>
<ul>
<li><a href="#nogo">Save</a></li>
<li><a href="#nogo">Save & Exit</a></li>
<li><a href="#nogo">Exit</a></li>
</ul>
</li>
<li><a href="#nogo">Edit</a>
<ul>
<li><a href="#nogo">Add</a></li>
<li><a href="#nogo">Delete</a></li>
<li><a href="#nogo">Clear Form</a></li>
</ul>
</li>
<li><a href="#nogo">Reports</a>
<ul>
<li><a href="#nogo">Export to Excel</a></li>
<li><a href="#nogo">Export to HTML</a></li>
</ul>
</li>
</ul>
</div>
</body>最佳答案
添加以下 CSS:
#menu > ul {
white-space: nowrap;
}
#menu > ul > li {
display: inline-block;
float: none;
margin: 0 -3px 0 0;
}
float: none 需要覆盖规则 #menu li { float: left; }，这会导致父 ul 的 white-space: nowrap 规则被忽略。
display: inline-block 为列表项生成内联布局，但仍然允许它们在大小和定位方面被视为 block 元素。
需要否定 margin-right 来覆盖 HTML 源代码中换行符到单个空格的默认转换；没有它，您的顶级菜单项之间将有空格。
display: inline-block 在 IE7 中无法正常工作。描述了修复 here :
to get inline-block working for any element in Internet Explorer simply add "zoom:1; *display: inline; _height: 30px;" to the end of that elements style oh and yes change the height to whatever you need.
关于html - 从 "Wrapping"阻止 CSS 水平下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13092143/