從“包裝”中防止CSS水平下拉菜單
[英]Prevent CSS Horizontal Drop-Down Menu from “Wrapping”
問題描述
我對這個事實感到沮喪，一旦瀏覽器窗口被重新調整大小，這個小好的菜單就會換行。 無論窗口是否調整大小，如何防止包裝並保持固定狀態？
<!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>
3 個解決方案
解決方案1
17 已采納 2012-10-26 18:22:51
添加以下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; } #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;” 到那個元素風格的結尾哦，是的，改變高度到你需要的任何東西。
解決方案2
0 2012-10-26 18:11:05
試試li { display:table-cell; } li { display:table-cell; } ，而不是float:left
解決方案3
0 2012-10-26 18:54:14
你設置width: 100%; 在<div id="menu"> ，這意味着它將比其父級寬100％ - 歸結為瀏覽器窗口。
相反，強制minium寬度大致等於元素內容的大小， width: 35em; 在這種情況下。 基於文本大小的相對測量將使用更大的文本進行縮放，但如果內容更大，則需要增加它。
帶有下拉菜單的CSS水平菜單到帶有下拉菜單的垂直菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.