单击响应菜单时导航按钮移动
[英]navigation buttons shift when responsive menu is clicked
问题描述
下面是一个导航栏，其左侧带有徽标（主页按钮），右侧带有呼叫按钮和菜单下拉按钮。 单击菜单按钮并打开下拉菜单后，呼叫按钮将移至菜单按钮顶部的右侧，整个导航栏仅变成1个按钮。 是什么原因导致这种转变？
function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }
body { position: relative; height: 100vh; margin: 0px; background-color: #e6e6e6e6; color: #444; font: .9em Arial, sans-serif; } .topnav { overflow: hidden; background-color: #185b9b; position: fixed; top: 0; width: 100%; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #2672b2; color: white; } .active { background-color: #185b9b; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } .main { padding: 16px; margin-top: 30px; height: 100%; } .wrapper { box-shadow: 0 5px 20px rgba(0, 0, 0, .25); border-radius: 5px; overflow: hidden; margin-bottom: 20px; background-color: white; } #one { float: left; margin: 10px; display: flex; align-items: center; justify-content: center; min-height: 130px; width: 200px; height: 100%; } #one img { max-height: 25px; max-width: 160px; } #two { overflow: hidden; margin: 10px; min-height: 130px; } @media screen and (max-width: 910px) { #one { float: none; margin-right: 10; width: auto; border: 0; } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Logo Name</a> <a href="#contact">Contact Us</a> <a href="#news">Download</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> <a href="tel:800-922-0204" class="icon"> <i class="fas fa-phone"></i> </a> </div> <div class="main"> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> </div> </body> </html>
2 个解决方案
解决方案1
0 2019-02-20 22:47:13
我看到您的媒体查询的position: absolute
@media screen and (max-width: 600px) {
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
该解决方案没有position: absolute
我从css中删除了以上内容，我输入了.topnav
.topnav {
display: flex;
justify-content: space-between;
}
并将菜单链接和图标都放在div 。 看一下上面的代码。
希望对您有帮助。
body { position: relative; height: 100vh; margin: 0px; background-color: #e6e6e6e6; color: #444; font: .9em Arial, sans-serif; } .topnav { overflow: hidden; background-color: #185b9b; position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #2672b2; color: white; } .active { background-color: #185b9b; color: white; } .topnav .icon { display: none; } .menu-icons { display: flex; height:48px; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; } .topnav.responsive a { float: none; display: block; text-align: left; } } .main { padding: 16px; margin-top: 30px; height: 100%; } .wrapper { box-shadow: 0 5px 20px rgba(0, 0, 0, .25); border-radius: 5px; overflow: hidden; margin-bottom: 20px; background-color: white; } #one { float: left; margin: 10px; display: flex; align-items: center; justify-content: center; min-height: 130px; width: 200px; height: 100%; } #one img { max-height: 25px; max-width: 160px; } #two { overflow: hidden; margin: 10px; min-height: 130px; } @media screen and (max-width: 910px) { #one { float: none; margin-right: 10; width: auto; border: 0; } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> </head> <body> <div class="topnav" id="myTopnav"> <div> <a href="#home" class="active">Logo Name</a> <a href="#contact">Contact Us</a> <a href="#news">Download</a> </div> <div class="menu-icons"> <a href="tel:800-922-0204" class="icon"> <i class="fas fa-phone"></i> </a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> </div> <div class="main"> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>
`
解决方案2
0 已采纳 2019-02-20 22:48:12
条形图标和电话图标都使用同一类，因此它们都被分配了相同的定位属性。 将它们设置为单独的类，以便它们可以保持其唯一位置而不是重叠。
body { position: relative; height: 100vh; margin: 0px; background-color: #e6e6e6e6; color: #444; font: .9em Arial, sans-serif; } .topnav { overflow: hidden; background-color: #185b9b; position: fixed; top: 0; width: 100%; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #2672b2; color: white; } .active { background-color: #185b9b; color: white; } .topnav .iconBars, .topnav .iconPhone { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) { display: none; } .topnav a.iconBars, .topnav a.iconPhone { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; } .topnav.responsive .iconBars { position: absolute; right: 0; top: 0; } .topnav.responsive .iconPhone { position: absolute; right: 47px; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } .main { padding: 16px; margin-top: 30px; height: 100%; } .wrapper { box-shadow: 0 5px 20px rgba(0, 0, 0, .25); border-radius: 5px; overflow: hidden; margin-bottom: 20px; background-color: white; } #one { float: left; margin: 10px; display: flex; align-items: center; justify-content: center; min-height: 130px; width: 200px; height: 100%; } #one img { max-height: 25px; max-width: 160px; } #two { overflow: hidden; margin: 10px; min-height: 130px; } @media screen and (max-width: 910px) { #one { float: none; margin-right: 10; width: auto; border: 0; } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Logo Name</a> <a href="#contact">Contact Us</a> <a href="#news">Download</a> <a href="javascript:void(0);" class="iconBars" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> <a href="tel:800-922-0204" class="iconPhone"> <i class="fas fa-phone"></i> </a> </div> <div class="main"> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>
单击响应式导航按钮时文本未对齐
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.