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

Question

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

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

tuf*_*uff 17

添加以下CSS:

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

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

Run Code Online (Sandbox Code Playgroud)

float: none需要重写规则#menu li { float: left; },这会导致母体ul的white-space: nowrap被忽略规则.

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

margin-right需要使用否定方法来覆盖HTML源中的换行符到单个空格的默认转换; 没有它,您的顶级菜单项将在它们之间有空格.

display: inline-block在IE7中无法正常工作.这里描述了一个修复:

要为Internet Explorer中的任何元素获取内联块,只需添加"zoom:1;*display:inline; _height:30px;" 到那个元素风格的结尾哦,是的,改变高度到你需要的任何东西.

归档时间：	13 年，4 月前
查看次数：	15412 次
最近记录：	13 年，4 月前