我一直在 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 关注
- 77 浏览
添加回答
举报
0/150
提交
取消