文本流出导航栏，即使使用自动换行或分词

时间：2016-12-02 14:19:39

标签： html css word-wrap

我目前正在使我的网站响应，但这意味着我还需要在调整大小时让导航栏随屏幕移动，我正试图让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>

正如你在这里看到的那样，如果你没有将它放在全视图中，导航文本将流出导航栏，但它应该在网站的其他链接下断开，这是我们的一项任务收到了，我们需要创建一个响应式网站，现在我已经很远了！

感谢任何帮助，谢谢！。

1 个答案:

答案 0 :(得分：0)

您需要在容器上使用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

这样的东西
相关问题
最新问题