我一直在 W3 Schools 中進(jìn)行修改，到目前為止我已經(jīng)獲得了預(yù)期的效果，但是導(dǎo)航欄現(xiàn)在隨下拉菜單一起擴(kuò)展。我缺少更好的方法嗎？提前對(duì)格式表示歉意，并感謝您的寶貴時(shí)間。編輯：希望進(jìn)一步澄清：示例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貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊
整個(gè)導(dǎo)航范圍擴(kuò)大的原因是由于該項(xiàng)目的定位。您已將其.dropdown-content設(shè)置為position: relative;通過(guò)將其更改為position: absolute;它將解決第一個(gè)問(wèn)題。
然而，現(xiàn)在要獲得與父級(jí)相同的寬度，有幾種方法可以做到這一點(diǎn)。最簡(jiǎn)單的方法就是簡(jiǎn)單地設(shè)置一個(gè)width屬性dropdown-content，這樣它就總是相同的。唯一的問(wèn)題是，如果您的下拉內(nèi)容區(qū)域較長(zhǎng)，則會(huì)導(dǎo)致單詞被截?cái)?。如果是這種情況，您可以使用它min-width來(lái)代替。97.45px;我已經(jīng)根據(jù)標(biāo)簽上使用的填充計(jì)算了寬度<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;
}
或者，就像我說(shuō)的min-width: 97.45px;。這將使其與父級(jí)保持相同的寬度，同時(shí)允許選項(xiàng)隨著更大的內(nèi)容而擴(kuò)展。
- 1 回答
- 0 關(guān)注
- 105 瀏覽
添加回答
舉報(bào)
0/150
提交
取消