文本流出导航栏，即使使用自动换行或断字时也是如此

Question

我目前正在使我的网站响应，但这意味着我还需要在调整大小时使导航栏随屏幕移动，我正试图让 css 转到调整浏览器大小时的下一行

* {
 padding: 0px;
 margin: 0px;
}

html {
 
 width: 100%;
 height: 100%;
}

#head {
 margin-top: .5%;
 width: 87%;
 margin-left: 6.5%;
 height: 120px;
 background-color: rgb(241, 181, 0);
}

#head img {
 margin-left: 15px;
 margin-top: 10px;
 width: 140px;
 height: 90px;
}

#head h3 {
 font-size: 36px;
 margin-top: -4%;
 margin-left: 45%;

}

#head p {
 margin-left: 47.4%;
 font-size: 18px;

}

#nav {
 overflow: initial;
 word-wrap: break-word;
 width: 87%;
 margin-left: 6.5%;
 background-color: rgb(187, 187, 187);
 float: left;
}

#nav ul {
 word-wrap: break-word;
 display: flex;
}

#nav li {
 padding-left: 45px;
 padding-right: 45px;
 list-style: none;
 
}
#nav a:hover {
 background-color: rgb(205, 205, 205);
}

#nav a {
 width: 1440px;
 margin-left: 1em;
 color: #000;
 font-size: 1.8em;
 text-decoration: none;
}

#nav-right {
 margin-left: 25%;
 float: right;
}

#content {
 display: inline-block;
 overflow: visible;
 background-color: rgb(241, 181, 0);
 width: 87%;
 height: auto;
 margin-left: 6.5%;

}

#gallery {
 position: relative;
 margin-top: 2%;
 margin-left: 15%;
 width: 69%;
 height: 335px;
 background-color: #131313;
}

#gallery img {
 width: 100%;
 height: 100%;
}

.galleryBTN {
 cursor: pointer;
 position: absolute;
 margin-top: -21.4%;
 text-align: center;
 background-color: rgb(187, 187, 187);
 width: 6%;
 margin-left: 94%;
 height: 150px;
 text-decoration: none;
}

.galleryBTN ~ .galleryBTN {
 margin-left: 0%;
}

.galleryBTN p {
 color: #000;
 text-decoration: none;
 margin-top: 65px;
}

#webInfo {
 min-height: 400px;
 background-color: rgb(218, 166, 7);
 float: left;
 margin-top: 5%;
 margin-left: 5%;
 width: 50%;
 height: auto;
   -moz-box-shadow: 0 0 5px #000;
   -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}

#webInfo p {
 font-size: 18px;
 margin-left: 1%;
 overflow: hidden;
}

#addr {
 min-height: 400px;
 background-color: rgb(218, 166, 7);
 overflow: hidden;
 float: right;
 margin-top: 5%;
 margin-right: 2%;
 width: 40%;
 height: auto;
   -moz-box-shadow: 0 0 5px #000;
   -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}

#addr img {
 width: 340px;
 height: 320px;
 margin-top: 5%;
 margin-right: 5%;
 float: right;
}

#addr p {
 font-size: 32px;
 text-align: right;
 margin-right: 12px;
 margin-top: 20%;
 float: right;
 margin-left: 4px;
 font-size: 16;
}

#separator {
 margin-top: 625px;
 background-color: #000;
 border: 1px solid #000;
}

#sep {
 background-color: #000;
 border: 1px solid #000;
}

.partner {
 display: inline-block;
 margin-top: 2%;
 margin-left: 5.4%;
 margin-right: 3%;
 width: 180px;
 height: 210px;
}

.partner img {
 width: 180px;
 height: 180px;
}

.partner p {
 margin-top: 10px;
 text-align: center;
}

.prices {
 overflow: hidden;
 display: inline-block;
 background-color: rgb(218, 166, 7);
 margin-top: 3%;
 margin-left: 5%;
 width: 42%;
 height: 125px;
 -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}

#visblock {
 width: 100%;
 height: 50px;
}

.prices img {
 float: left;
 margin-top: 2%;
 margin-left: 2%;
 width: 90px;
}

.prices p {
 word-wrap: break-word;
 white-space: initial;
 clear: both;
 margin-left: 18%;
}

#shop {
 margin-top: 2%;
 margin-left: 5%;
 background-color: rgb(218, 166, 7);
 width: 90%;
 min-height: 960px;
 height: auto;
 overflow: hidden;
 -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}

#shoppingCart {
 margin-top: 30px;
 display: inline-block;
 margin-left: 87%;
}

#shoppingCart img {
 float: right;
 width: 55px;
 height: 55px;
}

#shoppingCart p {
 float: left;
 margin-top: 20px;
}

.shopItem {
 overflow: auto;
 display: inline-block;
   background-color: rgb(218, 166, 7);
   margin-top: 3%;
   margin-left: 2.5%;
   margin-right: 2.5%;
  width: 27%;
  min-height: 225px;
  height: 25%;
  -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}

.shopItem img {
 float: left;
 margin-left: 3%;
 margin-top: 3%;
 width: 120px;
 height: 140px;
}

.shopItem p {
 word-wrap: break-word;
 white-space: initial;
 clear: both;
 margin-left: 7px;
 padding-bottom: 2%;

}

#shopTextContainer {
 font-size: 18px;
 height: 82%;
 overflow: hidden;
}

.shopItem a {
 background-color: #FFF;
 color: #000;
 text-decoration: none;
 margin-top: 1.2%;
 padding: 7px;
 margin-right: 36%;
 float: right;
}

#tableContainer {
 background-color: rgb(218, 166, 7);
 width: 95%;
 overflow: hidden;
 height: 95%;
 margin-top: 2.5%;
 margin-left: 2.5%;
 margin-bottom: 2.5%;
  -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}

 #agendaTable table, th, td {
  table-layout: fixed;
  text-align: center;

 font-size: 32px;
 border: 1px solid black;
 width: 100%;
}

.team {
 display: inline-block;
 overflow: hidden;
 margin-left: 10%;
 margin-top: 4%;
 width: 20%;
 height: 65%;
 margin-bottom: 4%;
 
}

.team img {
 margin-top: 10%;
 margin-left: 15%;
 margin-bottom: 2%;
 width: 220px;
}

.team p {
 text-align: center;
    font-size: 18px;
}

#vactitle {
 font-weight: bold;
 text-align: center;
 font-size: 24px; 
}

#vacature {
 width: 90%;
 height: auto;
 margin-bottom: 2%;
 
}

#vacature p {
 margin-top: 4%;
 margin-left: 10%;
}

#piste-text {
 width: 90%;
 margin-top: -150px;
 margin-left: 5%;
 margin-bottom: 50px;
 min-height: 200px;
 word-wrap: break-word;
 white-space: initial;
 overflow: hidden;

}

#pistes {
 width: 80%;
 height: 70%;
}

#pistes img {
 background-color: #000;
 width: 80%;
 height: 60%;
 margin-top: 3%;
 margin-left: 20%;
}

#form {
 text-align: center;
 background-color:  rgb(218, 166, 7);
 margin-top: 5%;
 margin-bottom: 5%;
 margin-left: 10%;
 width: 80%;
  -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}

#form input {
 min-height: 40px;
}

#form input[type=submit] {
 min-width: 240px;
}

#form input[type=text], input[type=password], select {
 min-width: 450px;
}

#form input[type=text], input[type=password], select {
 width: 60%;
 height: 6%;
 font-size: 2em;
}

#form input[type=submit] {
 margin-top: 5%;
 margin-bottom: 3%;
 width: 20%;
 height: 7%;
 font-size: 2em;
}

#form p {
 font-size: 1.8em;
 margin-top: 3%;
}

#form a {
 color: #000;
 text-decoration: none;
 margin-top: 5%;
 font-size: 2em;
}

#form .small-form select, #form .small-form input {
 min-width: 200px;
 width: 20%;
}

#form .small-form p {
 margin-left: 5%;
 margin-right: 5%;
 display: inline-block;
}

#pageNumber {
 margin-top: 2%;
 text-align: center;
 width: 100%;
 height: 40px;
 font-size: 23px;
}

footer {
 margin-top: 5px; 
 background-color: rgb(187, 187, 187);
 text-align: center;
 width: 87%;
 font-size: 26px;
 margin-left: 6.5%;
 margin-bottom: .5%; 
 height: auto;
}

@media (max-width: 1666px) {

 #nav { 
  height: 10%;
 }

 #nav a {
  word-wrap: break-word;
  white-space: initial;
 }

 .galleryBTN {
  margin-top: -25%;
 }

  #shoppingCart {
   margin-left: 80%;
   padding: 0px;
  }

 #shoppingCart img {
  float: left;
 }

 #shoppingCart p {
  float: left;
 }

 .shopItem {
  width: 90%;
 }

 .shopItem a {
  padding-bottom: 10px;
 }
}

@media (max-width: 1520px) {
 .galleryBTN {
  margin-top: -27%;
 }
}

@media (max-width: 1480px) {
 .galleryBTN {
  margin-top: -28%;
 }

 #addr p {
  font-size: 1.2em;
  margin-top: 5%;
  margin-right: 35%;
  text-align: center;
 }

}

@media (max-width: 1400px) {
 .galleryBTN {
  margin-top: -30%;
 }

 #addr img {
  margin-right: 13%;
 }

 #addr p {
  margin-left: 15%;
 }

 #webInfo p {
  font-size: 1.2em;
 }
}

@media (max-width: 1250px) {

 #separator {
  margin-top: 1050px;
 }

 #webInfo {
  width: 90%;
 }

 #addr {
  width: 90%;
  margin-left: 5%;
  float: left;
 }
 #addr img {
  padding-left: 30%;
  float: left;
  width: 40%;
  height: 30%;
 }

 #addr p {
  margin-bottom: 30px;
 }

 #head {
  margin: 0px;
  width: 100%;
 }

 #vactitle {
  margin-left: 10%;
 }

 #vacature {
  margin-bottom: 30px;
 }


 #gallery {
  margin-top: 5%;
  margin: 0px;
  width: 100%;
 }

 .galleryBTN {
  margin-top: -20%;
 }

 .team {

  height: auto;
  width: 90%;
 }

 #pageNumber {
  font-size: 1.5em
 }

 .team img {
  margin-left: 24%;
 }

 #vacature {
  font-size: 1.4em;
 }

 .team p {
  font-size: 1.4em;
  text-align: center;
  margin-left: -22%;
  margin-right: 7%;
 }

 #pistes {
  width: 100%;
 }

 #pistes img {
  margin-left: 0px;
  width: 100%;
 }

 #piste-text {
  font-size: 1.4em;
 }

 #head h3 {
  margin-top: -10%;
 }

 #nav {
  margin: 0px;
  width: 100%;
 }

 #content {
  margin: 0px;
  width: 100%;
 }

 .partner {
  padding-left: 15%;
 }
 #addr p {
  margin-top: 8%;
  margin-left: 40%;
  text-align: center;
  float: left;
 }

 footer {
  margin: 0px;
  width: 100%;
 }
}

@media (max-width: 1152px) {

 #pageNumber {
  font-size: 1.8em
 }

 .galleryBTN {
  margin-top: -23%;
 }

 #form input {
  min-width: 0px;
 }
}

@media (max-width: 952px) {

 #shoppingCart {
  margin-left: 75%;
  padding: 0px;
 }

}

@media (max-width:  906px) {

 .prices {
  width: 90%;
 }
 .galleryBTN {
  margin-top: -28%;
 }

}

@media (max-width: 768px) {
 .galleryBTN {
  margin-top: -33%;
 }

 #pageNumber {
  font-size: 1.8em
 }

 #shoppingCart {
  margin-left: 70%;
  padding: 0px;
 }

 #webInfo {
  float: left;
 }

 .partner {
  padding-left: 30%;
 }

}

@media (max-width: 631px) {

 #vacature p {
  font-size: 1.4em;
 }

 .galleryBTN {
  margin-top: -40%;
 } 
 #shoppingCart {
  margin-left: 65%;
  padding: 0px;
 }
}

@media (max-width: 524px) {
 .galleryBTN {
  margin-top: -50%;
 }

 #separator {
  margin-top: 1100px;
 }

 #form input[type=submit] {
  width: 60%;
 }

 #shoppingCart {
  margin-left: 55%;
  padding: 0px;
 }

}

@media(max-width: 480px) {

 #head h3 {
  position: absolute;
  padding-top: -50%;
 }

 #head img {
  margin-left: 0px;
 }

 .galleryBTN {
  margin-top: -60%;
 }

 #separator {
  margin-top: 1200px;
 }

 #shoppingCart {
  margin-left: 50%;
  padding: 0px;
 }

 .partner {
  padding-left: 20%;
 }
} 

@media(max-width:  346px) {
 .galleryBTN {
  margin-top: -75%;
 }

 #separator {
  margin-top: 1300px;
 }

 .partner {
  padding-left: 15%;
 }
}

@media(max-width: 300px) {
 .partner {
  padding-left: 15%;
 }
}

}

<html>
 <head>
  <title> Bigfoot bar - home </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style/style.css">
  <link rel="icon" href="img/logo.png" type="image/x-icon"/>
 </head>
 <body>
 <div id="container">
  <div id="head">
   <img src="img/logo.png"/>
   <h3>Bigfoot bar</h3>
   <p>Een slogan hier</p> 
  </div>
  <div id="nav">
   <ul>
    <a href="index.php"> <li> Home </li> </a>
    <a href="prices.php"> <li> Prices </li> </a>
    <a href="shop.php"> <li> Shop </li> </a>
    <a href="agenda.php"> <li> Agenda </li> </a>
    <a href="team.php"> <li> Team </li> </a>
    <a href="slopes.php"> <li> Slopes </li> </a>
    <a href="login.php"><li>Login/register</li></a>
   </ul>
  </div>
  <div id="content"> 
   <div id="gallery">
    <img src="" value="0" name="img1">
     <a class="galleryBTN"><p>Next</p></a>
     <a class="galleryBTN"><p>Prev</p></a>
   </div>
  <div id="webInfo">
  <p> text about the greatness of mankind, who are we? Why are we here? Those are questions many people ask themselves, however i think the question that we all should think about is "Where will we go?". We do not know how our life will turn out to be, but we surely could predict it somehow, that is what i believe to be the truth, but there are some who do not agree with me, they think we should live in the present and not think about our future, which is silly to think about, because the offspring that we create will have to live here, meaning that our problems will become their problems in the future. I really hope that the government has some kind of plan for the people living in the country that are getting older, the newer generations won't be able to help their parents financially because the scale of support will be 2:1 in around 30 to 40 years! Yes, shocking isn't it? We as children in the netherlands will be screwed due to these plans of parents, such a SHAME!!! </p>
  </div>
  <div id="addr">
   <img src="img/adress.png">
   <p>Adress: <br>
    New York City
    <br> Lorem Ipsum
    <br> 3881TC, ergens</p>
  </div>
   <hr id="separator">
   <div class="partner">
    <img src="img/partners/img1.png">
    <p> Een partner </p>
   </div>
   <div class="partner">
    <img src="img/partners/img1.png">
    <p> Een partner </p>
   </div>
   <div class="partner">
    <img src="img/partners/img1.png">
    <p> Een partner </p>
   </div>
   <div class="partner">
    <img src="img/partners/img1.png">
    <p> Een partner </p>
   </div>
   <div class="partner">
    <img src="img/partners/img1.png">
    <p> Een partner </p>
   </div>
   <div class="partner">
    <img src="img/partners/img1.png">
    <p> Een partner </p>
   </div>
   <div class="partner">
    <img src="img/partners/img1.png">
    <p> Een partner </p>
   </div>
   <div class="partner">
    <img src="img/partners/img1.png">
    <p> Een partner </p>
   </div>
   <div class="partner">
    <img src="img/partners/img1.png">
    <p> Een partner </p>
   </div>
   <div class="partner">
    <img src="img/partners/img1.png">
    <p> Een partner </p>
   </div>

   <div id="visblock"></div>
  </div>
 </div>
 <footer>Een geweldig copyright bericht</footer>
 </body>
</html>

正如你在这里看到的，如果你不把它放在全视图中，导航文本会从导航栏中流出，但它应该会中断并转到网站的其他链接下面，这是一个作业我们已经收到，我们需要创建一个响应式网站，我现在还很远！

非常感谢任何帮助，谢谢！

Answer 1

您需要在容器上使用 flex-wrap: wrap;。

像这样：

HTML:

<div id="nav">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="prices.php">Prices</a></li>
        <li><a href="shop.php">Shop</a></li>
        <li><a href="agenda.php">Agenda</a></li>
        <li><a href="team.php">Team</a></li>
        <li><a href="slopes.php">Slopes</a></li>
        <li><a href="login.php">Login</a></li>
    </ul>
</div>

CSS:

#nav {
    display:flex;
    felx-wrap:wrap;
}

#nav li {
    width 100px;
}

这里有关于所有弹性框选项的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使网站具有响应性是一件很棘手的事情，您可能需要考虑使用网格系统来帮助解决这个问题。 Bootstrap 和 Foundation 等框架充分利用了网格系统。如果你想要更轻量级的东西，你可以使用 skeleton

文本流出导航栏，即使使用自动换行或断字时也是如此

Text flows out of navigation bar, even when using word-wrap or word-break

html

css

word-wrap