我对这个事实感到沮丧,一旦浏览器窗口重新调整大小,这个小菜单将会换行。无论窗口是否调整大小,如何防止包装并保持固定状态?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#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;
}
</style>
</head>
<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>
<ul>
</div>
</body>
</html>
答案 0 :(得分:17)
添加以下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
的{{1}}规则。
white-space: nowrap
为列表项生成内联布局,但仍允许它们在大小和位置方面被视为块元素。
需要使用否定display: inline-block
来覆盖HTML源中的换行符到单个空格的默认转换;没有它,你的顶级菜单项之间会有空格。
margin-right
在IE7中无法正常运行。修复了here:
为Internet Explorer中的任何元素启用内联块工作只需添加“zoom:1; * display:inline; _height:30px;”到那个元素风格的结尾哦,是的,将高度改为你需要的任何东西。
答案 1 :(得分:0)
只需尝试li { display:table-cell; }
而不是float:left
答案 2 :(得分:0)
您已在width: 100%;
上设置<div id="menu">
,这意味着它将与其父级一样宽100% - 归结为浏览器窗口。
相反,在这种情况下,强制minium宽度大致等于元素内容的大小width: 35em;
。基于文本大小的相对度量将随着更大的文本缩放,但如果内容更大,则需要增加它。