4

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

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

3 回答 3

18

添加以下 CSS：

#menu > ul { 
    white-space: nowrap;
}

#menu > ul > li {
  display: inline-block;
  float: none;
  margin: 0 -3px 0 0;
}

float: none需要覆盖 rule #menu li { float: left; }，这会导致 parentul的white-space: nowrap规则被忽略。

display: inline-block为列表项生成内联布局，但在大小和定位方面仍允许将它们视为块元素。

需要否定margin-right来覆盖 HTML 源中的换行符到单个空格的默认转换；没有它，您的顶级菜单项之间将有空格。

display: inline-block在 IE7 中无法正常工作。此处描述了一个修复程序：

要让 Internet Explorer 中的任何元素都可以使用 inline-block，只需添加“zoom:1;*display:inline;_height:30px;” 到元素样式的末尾哦，是的，将高度更改为您需要的任何内容。

于 2012-10-26T18:22:51.760 回答
0

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

于 2012-10-26T18:11:05.467 回答
0

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

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

于 2012-10-26T18:54:14.933 回答