從「包裝」防止CSS水平下拉菜單

我對這個事實感到沮喪，即一旦瀏覽器窗口重新調整大小，這個小巧的菜單就會被包裹。無論窗口是否調整大小，如何防止纏繞並保持固定狀態？從「包裝」防止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>

來源

2012-10-26 Jason Kelly

工作示例？ –

添加以下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的white-space: nowrap規則被忽略。

display: inline-block爲列表項產生一個內聯佈局，但仍然允許它們在塊大小和位置方面像塊單元一樣對待。

需要否定margin-right來覆蓋HTML源代碼中的換行符的默認轉換爲單個空格;沒有它，你的頂級菜單項將在它們之間有空格。

display: inline-block在IE7中無法正常工作。一個修復程序中描述here：

得到內聯塊在Internet Explorer中的任何元件的工作簡單地添加「縮放：1; *顯示：內聯; _height：30像素;」到該元素風格的結尾哦，是的，將高度改變爲任何你需要的。

來源

2012-10-26 18:22:51 tuff

只是嘗試li { display:table-cell; }代替float:left

來源

2012-10-26 18:11:05 bukart

不適用於我。必須與IE7兼容。 –

在這種情況下...也許這個作品 '#menu ul {width：9999px}' '#menu {overflow：hidden; }' – bukart

你在<div id="menu">設置width: 100%;，這意味着它會爲寬爲100％，是其父母 - 這歸結到瀏覽器窗口。

相反，在這種情況下，強制執行最小寬度大致等於元素內容的大小width: 35em;。基於文本大小的相對度量將以更大的文本進行縮放，但如果內容更大，則需要增加它。

來源

2012-10-26 18:54:14 KatieK

從「包裝」防止CSS水平下拉菜單

回答

相關問題