如何让导航栏滑到下一行？

Question

你好社区：我有以下问题：在下面的代码中我想要导航栏：

(Startseite | Leistungen | Kontakt | Impressum)

在不与#header-nav-bild-wrapper 重叠的情况下，在被灰色容器包裹的同时滑入下一行

我想要导航栏开始一个新行并且导航图片（WebDEsign）在它上面。我该如何存档？

@font-face{
  font-family: 'Raleway';
  src: url('../fonts/Raleway-VariableFont_wght.ttf');
  }
@font-face{
  font-family: 'Lato';
  src: url('../fonts/WorkSans-VariableFont_wght.ttf');
  }

*{
  box-sizing:border-box;
  }
html,body{
  margin:0;
  font-family:Raleway,Lato,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  height:10000px;
}

/*NAVIGATIONSLEISTE*/

#header-nav{
  top:0;
  position:relative;
  position:fixed!important;
  height:50px;
  width:100%;
  background-color:#3d3f45;
}

#header-nav-bild{
  height:30px;
  width:auto;
  position:absolute;
  left:10px;
  top:10px;
}

#site-navigator{
  position:absolute;
  right:10px;
  top:0px;
}

.navlinks-wrapper{
  display:inline-block;
  height:50px;
}
.navlinks{
  margin-top:0.45rem;
  font-size:25px;
  display:inline-block;
  height:50px;
}

a.navlinks:link {color: white;text-decoration:none;}
a.navlinks:visited{color:white;text-decoration:none;}
a.navlinks:hover{color:#e5e5e5;text-decoration:none;}
a.navlinks:active{color:#a62c21;text-decoration:none;}

#activenav>a.navlinks  {
color:#3d3f45!important;}

#activenav{
  background-color:#e5e5e5;
}
/*HEADERBILD*/
#headerpic{
  margin-top:50px;
  width:100%;
  height:0;
  padding-top:20.83%;
  background-image:url("https://imagizer.imageshack.com/img923/5105/jayAiI.jpg");
  background-repeat:no-repeat;
  background-size:contain;
}

/*GRIDSYSTEM*/
.col{
  border:1px solid #91c4ff;
  background-color:#bfddff;
}
.col>p{
  background-color:white;
  margin:0;
  text-align:center;
}

#container{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.row::after{
  content:"";
  clear:both;
  display:block;
}

.row{
  height:100px;
  width:100%;
}

.col {
  float:left;
  min-height:1px;
  height:100px;
  padding:10px;

}

.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%;}
.col-6{width:100%;}

@media(max-width:768px){
  .col-1{width:50%;}
  .col-2{width:50%;}
}

@media(max-width:480px){
  .col-1{width:100%;}
  .col-2{width:100%;}
  .col-3{width:100%;}
}
/*GRID SYSTEM NAVBAR*/

.navbar{
  width:50%;
}
.site-navigator-wrapper{
  position:absolute;
  right:0;
}
@media(max-width:768px){
  #site-navigator{
    width:100%;
    right:0px;
  }
  #site-navigator-inside{
    display:block;
    position:absolute;
    right:0;
  }
  #header-nav-bild-wrapper{
    display:block;
  }
}

<body>
        <!--Navigationsleiste-->
    <nav id="header-nav">
            <a id="header-nav-bild-wrapper"class="navbar" href="index.html"><img id="header-nav-bild" src="https://imagizer.imageshack.com/img924/6999/2UQhwy.png"></a>
            <div id="site-navigator-wrapper"class="navbar">
                <div id="site-navigator">
                    <div id="site-navigator-inside">
                    <div id="activenav"class="navlinks-wrapper"><a href="index.html" class="navlinks">Startseite</a></div>
                    <div class="navlinks-wrapper"><a href="Leistungen.html" class="navlinks">Leistungen</a></div>
                    <div class="navlinks-wrapper"><a href="Kontakt.html" class="navlinks">Kontakt</a></div>
                    <div class="navlinks-wrapper"><a href="Impressum.html" class="navlinks">Impressum</a></div>
                </div>
            </div>
            </div>
        </nav>
        <!--HeaderBild-->
        <header id="headerpic"></header>
        <!--GRIDSYSTEM-->
        <div id="container">
            <div class="row">
                <div class="col col-1"><p>col-1</p></div>
                <div class="col col-1"><p>col-1</p></div>
                <div class="col col-1"><p>col-1</p></div>
                <div class="col col-1"><p>col-1</p></div>
                <div class="col col-1"><p>col-1</p></div>
                <div class="col col-1"><p>col-1</p></div>
            </div>
            <div class="row">
                <div class="col col-2"><p>col-2</p></div>
                <div class="col col-2"><p>col-2</p></div>
                <div class="col col-2"><p>col-2</p></div>
            </div>
            <div class="row">
                <div class="col col-3"><p>col-3</p></div>
                <div class="col col-3"><p>col-3</p></div>
            </div>
            <div class="row">
                <div class="col col-6"><p>col-6</p></div>
            </div>
        </div>

    </body>

Answer 1

我建议您在不使用绝对定位的情况下重新设计整个导航栏。您可以使用 flex proprerty 使其更简单、响应更快。

我尝试根据您的代码使其工作，结果是：

@font-face{
  font-family: 'Raleway';
  src: url('../fonts/Raleway-VariableFont_wght.ttf');
  }
@font-face{
  font-family: 'Lato';
  src: url('../fonts/WorkSans-VariableFont_wght.ttf');
  }

* {
  box-sizing:border-box;
}
html,body{
  margin:0;
  font-family:Raleway,Lato,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  height:10000px;
}

/*NAVIGATIONSLEISTE*/

#header-nav{
  position: fixed;
  width:100%;
  background-color:#3d3f45;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#header-nav-bild{
  height:30px;
  width:auto;
}

#site-navigator{
  display: block;
}

.navlinks-wrapper{
  display:inline-block;
  height:50px;
}
.navlinks{
  margin-top:0.45rem;
  font-size:25px;
  display:inline-block;
  height:50px;
}

a.navlinks:link {color: white;text-decoration:none;}
a.navlinks:visited{color:white;text-decoration:none;}
a.navlinks:hover{color:#e5e5e5;text-decoration:none;}
a.navlinks:active{color:#a62c21;text-decoration:none;}

#activenav>a.navlinks  {
color:#3d3f45!important;}

#activenav{
  background-color:#e5e5e5;
}
/*HEADERBILD*/
#headerpic{
  margin-top:50px;
  width:100%;
  height:0;
  padding-top:20.83%;
  background-image:url("https://imagizer.imageshack.com/img923/5105/jayAiI.jpg");
  background-repeat:no-repeat;
  background-size:contain;
}

/*GRID SYSTEM NAVBAR*/
.site-navigator-wrapper{
  display: block;
}

@media(max-width:920px){
  #site-navigator{
    display: block;
    width: 100%;
  }
  
  #site-navigator-inside{
    display: block;
    width: 100%;
    background-color: gray;
  }
  
  #header-nav {
    flex-direction: column;
    flex-wrap: wrap;
  }
  
  #header-nav-bild-wrapper{
    display: block;
  }
}

<nav id="header-nav">
  <a id="header-nav-bild-wrapper" class="navbar" href="index.html">
     <img id="header-nav-bild" src="https://imagizer.imageshack.com/img924/6999/2UQhwy.png">
  </a>
  <div id="site-navigator-wrapper" class="navbar">
     <div id="site-navigator">
        <div id="site-navigator-inside">
           <div id="activenav" class="navlinks-wrapper"><a href="index.html" class="navlinks">Startseite</a></div>
           <div class="navlinks-wrapper"><a href="Leistungen.html" class="navlinks">Leistungen</a></div>
           <div class="navlinks-wrapper"><a href="Kontakt.html" class="navlinks">Kontakt</a></div>
           <div class="navlinks-wrapper"><a href="Impressum.html" class="navlinks">Impressum</a></div>
        </div>
      </div>
   </div>
</nav>

如何让导航栏滑到下一行？

How to make the navbar slip in the next row?

html

css

grid

media-queries