我一直在 W3 Schools 中進行修改，到目前為止我已經獲得了預期的效果，但是導航欄現在隨下拉菜單一起擴展。我缺少更好的方法嗎？提前對格式表示歉意，并感謝您的寶貴時間。編輯：希望進一步澄清：示例W3schools 的鏈接： https://www.w3schools.com/code/tryit.asp ?filename=GD1ZCKC1TKED代碼：<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style>body { font-family: Arial, Helvetica, sans-serif; }.mainNav { background-color: #000; padding:12px 10px 0px 0px; float: right; overflow: hidden;}.mainNav a { color: #FFF; float: left; display: block; padding: 15px; text-align: center; text-decoration: none; font-size: 17px;}.active { background-color: #4CAF50; color: white;}.mainNav .icon { display: none;}.dropdown { float: left; overflow: hidden;}.dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit;}.dropdown-content { display: none; position: relative; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: center;}.mainNav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white;}.dropdown-content a:hover { background-color: #ddd; color: black;}.dropdown:hover .dropdown-content { display: block;}@media screen and (max-width: 500px) { .logo { max-width: 25%; height: auto; padding-top:10px; margin-bottom:-50px; display: block; margin: auto; } .mainNav{ background-color: black; width:100%; font-size: 18px; } .mainNav a:not(:first-child), .dropdown .dropbtn { display: none; }
1 回答
楊__羊羊
TA貢獻1943條經驗 獲得超7個贊
整個導航范圍擴大的原因是由于該項目的定位。您已將其.dropdown-content設置為position: relative;通過將其更改為position: absolute;它將解決第一個問題。
然而，現在要獲得與父級相同的寬度，有幾種方法可以做到這一點。最簡單的方法就是簡單地設置一個width屬性dropdown-content，這樣它就總是相同的。唯一的問題是，如果您的下拉內容區域較長，則會導致單詞被截斷。如果是這種情況，您可以使用它min-width來代替。97.45px;我已經根據標簽上使用的填充計算了寬度<button>。
所以你需要做的就是將你的 css 更改.dropdown-content為：
.dropdown-content {
? display: none;
? position: absolute;
? background-color: #f9f9f9;
? box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
? z-index: 1;
? width: 97.45px;
}
或者，就像我說的min-width: 97.45px;。這將使其與父級保持相同的寬度，同時允許選項隨著更大的內容而擴展。
- 1 回答
- 0 關注
- 109 瀏覽
添加回答
舉報
0/150
提交
取消