当屏幕很小时，为什么我的导航菜单图标不在导航菜单内

Question

我有一个导航菜单，它是响应式的，但是当我将三栏导航菜单图标放在小屏幕上打开菜单时，它不在菜单中，而是在菜单之外和下方。我已经提供了这个

我尝试使用填充和边距，但在我的代码中没有用。 @Bhaskar 这是我所有的代码

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
    background-color: black;
    font-color: white;
    font-family: 'Open Sans', sans-serif;
    color: white;
}
a {
    text-decoration: none;
    margin: 50px;
    color: lightgreen;
    font-weight: 900;
}

ul, li{
    list-style-type: none;
    display: inline-block;
}

a:hover {
    text-decoration: underline;
    background-color: rgba(158, 158, 158, 0.6);
}
.topnav-li  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    }
.topnav {;
    height: 30px; 
    border-bottom: groove grey;
    text-align: center;
  }

.topnav a {
    text-decoration: none;
    margin: 50px;
    color: lightgreen;
    font-weight: 900;
}

.topnav a:hover {
    text-decoration: underline;
    background-color: rgba(158, 158, 158, 0.6);
}

.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;
  }
  .linkss {
    background-color: black;
  }
}

.content {
    width: 500px;
    height: auto;
    border: groove grey;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 640px) {
  .content {
    width: 400px;
  }
    .slide img {
    width: 400px;
  }
}

[data-component="slideshow"] .slide {
    display: none;
  text-align: center;
}

[data-component="slideshow"] .slide.active {
    display: block;
}

.dark-mode {
  background-color: grey;
  font-color: black;
}

.ld {
    background-color: lightgreen;
    border: none;
    padding: 5px;
    cursor: pointer;
}

.myButton {
    box-shadow: 0px 10px 14px -7px #3e7327;
    background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
    background-color:#77b55a;
    border-radius:4px;
    border:1px solid #4b8f29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size: 30px;
    padding:20px 30px;
    text-decoration:none;
    text-shadow:0px 1px 0px #5b8a3c;
    text-align: center;
    margin:0 auto;
    display:block;
}
.myButton:hover {
    text-decoration: none;
    background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
    background-color:#72b352;
}
.myButton:active {
    position:relative;
    top:1px;
}


@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,700,900italic,900);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);

#generic_price_table{
    background-color: #f0eded;
}

/*PRICE COLOR CODE START*/
#generic_price_table .generic_content{
    background-color: #fff;
}

#generic_price_table .generic_content .generic_head_price{
    background-color: #f6f6f6;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
    border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
    color: #525252;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
    color: #414141;
}

#generic_price_table .generic_content .generic_feature_list ul li{  
    color: #a7a7a7;
}

#generic_price_table .generic_content .generic_feature_list ul li span{
    color: #414141;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
    background-color: #E4E4E4;
    border-left: 5px solid #2ECC71;
}

#generic_price_table .generic_content .generic_price_btn a{
    border: 1px solid #2ECC71; 
    color: #2ECC71;
} 

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{
    border-color:   #b48811;
    color: #fff;
}

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span,
#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{
    color: #fff;
}

#generic_price_table .generic_content:hover .generic_price_btn a,
#generic_price_table .generic_content.active .generic_price_btn a{
    background-color: #2ECC71;
    color: #fff;
} 
#generic_price_table{
    margin: 50px 0 50px 0;
    font-family: 'Raleway', sans-serif;
}
.row .table{
    padding: 28px 0;
}

/*PRICE BODY CODE START*/

#generic_price_table .generic_content{
    overflow: hidden;
    position: relative;
    text-align: center;
}

#generic_price_table .generic_content .generic_head_price {
    margin: 0 0 20px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content{
    margin: 0 0 50px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
    border-style: solid;
    border-width: 90px 1411px 23px 399px;
    position: absolute;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head{
    padding-top: 40px;
    position: relative;
    z-index: 1;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
    font-family: "Raleway",sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag{
    padding: 0 0 20px;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price{
    display: block;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{
    display: inline-block;
    font-family: "Lato",sans-serif;
    font-size: 28px;
    font-weight: 400;
    vertical-align: middle;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{
    font-family: "Lato",sans-serif;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 60px;
    padding: 0;
    vertical-align: middle;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{
    display: inline-block;
    font-family: "Lato",sans-serif;
    font-size: 24px;
    font-weight: 400;
    vertical-align: bottom;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
    font-family: "Lato",sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    vertical-align: bottom;
}

#generic_price_table .generic_content .generic_feature_list ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

#generic_price_table .generic_content .generic_feature_list ul li{
    font-family: "Lato",sans-serif;
    font-size: 18px;
    padding: 15px 0;
    transition: all 0.3s ease-in-out 0s;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;

}
#generic_price_table .generic_content .generic_feature_list ul li .fa{
    padding: 0 10px;
}
#generic_price_table .generic_content .generic_price_btn{
    margin: 20px 0 32px;
}

#generic_price_table .generic_content .generic_price_btn a{
    border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    -webkit-border-radius: 50px;
    display: inline-block;
    font-family: "Lato",sans-serif;
    font-size: 18px;
    outline: medium none;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
}

#generic_price_table .generic_content,
#generic_price_table .generic_content:hover,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content .price,
#generic_price_table .generic_content:hover .price,
#generic_price_table .generic_content .generic_price_btn a,
#generic_price_table .generic_content:hover .generic_price_btn a{
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
} 
@media (max-width: 320px) { 
}

@media (max-width: 767px) {
    #generic_price_table .generic_content{
        margin-bottom:75px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #generic_price_table .col-md-3{
        float:left;
        width:50%;
    }
    
    #generic_price_table .col-md-4{
        float:left;
        width:50%;
    }
    
    #generic_price_table .generic_content{
        margin-bottom:75px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 1200px) {
}
#generic_price_table_home{
     font-family: 'Raleway', sans-serif;
}

.text-center h1,
.text-center h1 a{
    color: #7885CB;
    font-size: 30px;
    font-weight: 300;
    text-decoration: none;
}
.demo-pic{
    margin: 0 auto;
}
.demo-pic:hover{
    opacity: 0.7;
}

#generic_price_table_home ul{
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: table;
}
#generic_price_table_home li{
    float: left;
}
#generic_price_table_home li + li{
    margin-left: 10px;
    padding-bottom: 10px;
}
#generic_price_table_home li a{
    display: block;
    width: 50px;
    height: 50px;
    font-size: 0px;
}
#generic_price_table_home .blue{
    background: #3498DB;
    transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .emerald{
    background: #2ECC71;
    transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .grey{
    background: #7F8C8D;
    transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .midnight{
    background: #34495E;
    transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .orange{
    background: #E67E22;
    transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .purple{
    background: #9B59B6;
    transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .red{
    background: #E74C3C;
    transition:all 0.3s ease-in-out 0s;
}
#generic_price_table_home .turquoise{
    background: #1ABC9C;
    transition: all 0.3s ease-in-out 0s;
}

#generic_price_table_home .blue:hover,
#generic_price_table_home .emerald:hover,
#generic_price_table_home .grey:hover,
#generic_price_table_home .midnight:hover,
#generic_price_table_home .orange:hover,
#generic_price_table_home .purple:hover,
#generic_price_table_home .red:hover,
#generic_price_table_home .turquoise:hover{
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .divider{
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 20px;
}
#generic_price_table_home .divider span{
    width: 100%;
    display: table;
    height: 2px;
    background: #ddd;
    margin: 50px auto;
    line-height: 2px;
}
#generic_price_table_home .itemname{
    text-align: center;
    font-size: 50px ;
    padding: 50px 0 20px ;
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px;
    text-decoration: none;
    font-weight: 300;
}
#generic_price_table_home .itemnametext{
    text-align: center;
    font-size: 20px;
    padding-top: 5px;
    text-transform: uppercase;
    display: inline-block;
}
#generic_price_table_home .footer{
    padding:40px 0;
}

.demo-button {
    background-color: #333333;
    color: #ffffff;
    display: table;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: medium ;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
}
.demo-button:hover{
    background-color: #666;
    color: #FFF;
    text-decoration:none;
    
}
.bottom_btn:hover{
    background-color: #666;
    color: #FFF;
    text-decoration:none;
}


.flip-card {
  background-color: transparent;
  width: 500px;
  height: 500px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

::selection {
  background: lightgreen;
  color: black;
  font-weight: 900;
}

<noscript>Your browser does not support JavaScript!</noscript>
<!Doctype html>
<html lang="en">
<head>
<meta name="google-site-verification" content="dl71d0_3NOeCeDCG9GnUDYn0wQCdcEkRC7HYGIN-uP0" />
<meta name="ezcoderz, Ezcoderz, EzCoderz, coding, code, Jason Wang, Hire A Coder, Hire, Programing" content="Ezcoderz is a service where people can Hire me to code for them for money, all the sites we code are easy and simple. 
Avrage cost to hire per hour is smaller compared to others.">


 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta charset="UTF-8" />
<title>EZcoderZ Hire a coder cheap and easy - we like programming.</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<div class="linkss">
</ul><a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="price.html">Pricing</a>
</div>
<button onclick="darkMode()" class="ld">light mode on/off <i class="fa">&#xf042;</i></button>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
  </a>
  </div>
<br>
<div class="content">
    <div id="slideshow-example" data-component="slideshow">
        <div role="list">
            <div class="slide">
                <img src="img/slide1.png" alt="IMAGE FAILED TO DISPLAY">
            </div>
            <div class="slide">
                <img src="img/slide2.png" alt="IMAGE FAILED TO DISPLAY">
            </div>
            <div class="slide">
                <img src="img/slide3.png" alt="IMAGE FAILED TO DISPLAY">
            </div>
        </div>
    </div>
</div>
<br>
<br>
<div style="display: flex; flex-wrap: wrap; flex-direction: row;">
<img src="img/logo.png" style="margin: auto; align: center;" /> 
<p style="text-align: center;"> I will make websites for you if your website you want me to make is not <b>easy</b> then I will not make it.
If you did not read the terms of service then I will not code for you. Websites I make will be a bit better or the same as this website. You can add $2 an hour to remove my water mark in your website.
My watermark is going to be that logo above this text. You may not refund anything that is 50 lines of code or more. Payment options are- check. There is a 100 hires per month limit.</p>
<a href="price.html" class="myButton">Hire Now</a>
<hr>
<h2>Why us?</h2>
<p>We will code for you really cheap and simple so when you hire a coder from us we will get the job done FAST. Go aahed and click Hire now!</p>
</div>

<br>
<footer style="text-align: center;">
  <h2>Copyright ezcoderz 2022 | <a href="terms.html">terms</a></h2>
</footer>
</body>
</html>
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
} 
function darkMode() {
  var element = document.body;
  element.classList.toggle("dark-mode");
} 

var slideshows = document.querySelectorAll('[data-component="slideshow"]');
slideshows.forEach(initSlideShow);

function initSlideShow(slideshow) {

    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`);

    var index = 0, time = 5000;
    slides[index].classList.add('active');

    setInterval( () => {
        slides[index].classList.remove('active');
        
        index++;
        if (index === slides.length) index = 0;

        slides[index].classList.add('active');

    }, time);
}
</script>

我的代码在上面。

Answer 1

你可以使用弹性盒子。将链接标签包装在按钮列表中。

<section class="nav-section">
    <nav class="navbar">
        <ul class="nav-list">
            <li>home</li>
            <li>blog</li>
            <li>about</li>
            <li>contact</li>
        </ul>
     <div> <button> Menu</button></div>
    </nav>
    <div><button class="mybtn"> on/off</button></div>  
</section>

你可以看看这个codepen链接