Question

我对这个事实感到沮丧，一旦浏览器窗口重新调整大小，这个小菜单将会换行。无论窗口是否调整大小，如何防止包装并保持固定状态？

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

Answer 1

添加以下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;”到那个元素风格的结尾哦，是的，将高度改为你需要的任何东西。

Answer 2

只需尝试li { display:table-cell; }而不是float:left

Answer 3

您已在width: 100%;上设置<div id="menu">，这意味着它将与其父级一样宽100％ - 归结为浏览器窗口。

相反，在这种情况下，强制minium宽度大致等于元素内容的大小width: 35em;。基于文本大小的相对度量将随着更大的文本缩放，但如果内容更大，则需要增加它。

从“包装”中防止CSS水平下拉菜单

3 个答案: