色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

即使使用自動換行或自動換行，文本也會流出導(dǎo)航欄

CSS
錢瀠龍2年前8瀏覽0評論

我目前正在使我的網(wǎng)站具有響應(yīng)性，但這意味著當(dāng)你調(diào)整瀏覽器大小時，我也需要使導(dǎo)航條隨著屏幕移動，我正試圖讓css在我調(diào)整瀏覽器大小時轉(zhuǎn)到下一行

* {
	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>

你需要使用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;
    flex-wrap: wrap;
}

#nav li {
    width: 100px;
}

這里有一個關(guān)于所有flex box選項(xiàng)的指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

讓站點(diǎn)有響應(yīng)性是一件復(fù)雜的事情，你可以考慮用網(wǎng)格系統(tǒng)來幫助你。Bootstrap和Foundation等框架很好地利用了網(wǎng)格系統(tǒng)。如果你想要更輕便的東西，你可以使用像骨骼這樣的東西