單擊響應菜單時導航按鈕移動
[英]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.