<section>后面的空格

时间：2016-02-19 21:16:16

标签： javascript html css

刚开始使用这些语言。我想将我的底部导航栏附加到第二个彩色背景的末尾，但不能这样做。 SECTION和NAV之间有一个空格。怎么解决这个？整个网站也不可调整。当我缩小浏览器时，一切都变得混乱。我要感谢有关这些问题的任何建议，谢谢。 HERE IS THE CODE 

ul.bottom-nav {
   list-style-type: none;
   /*position: fixed; */
   overflow: hidden;
   margin: 0 0 -40px 0;
   padding: 0 0 0 400px;
   background-color: #110E0C;
 }

ul.bottom-nav li {
   float: left;
}

ul.bottom-nav li a {
   display: block;
   color: white;
   text-align: center;
   text-decoration: none;
   padding: 14px 30px;
   text-transform: uppercase;
}

ul.bottom-nav li a:hover {
   background-color: #C8D0D7; 
   color: #D8610C;
   border-bottom: 1px solid #D8610C;
}

ul.bottom-nav li a.active {
   background-color: #C8D0D7;
   color: #EA6E00;  
}

1 个答案:

答案 0 :(得分：0)

元素：悬停，和.active高于正常

你可以在hiver中使用并激活“margin-bottom：-1px”; 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

ul.topnav {
	list-style-type: none;
	/*position: fixed; */
	overflow: hidden;
	margin: 0;
	padding: 0 0 0 400px;
	background-color: #110E0C;
   /*width: 100%;
   top: 0; */
}

ul.topnav li {
	float: left;
}

ul.topnav li a {
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;
	padding: 14px 30px;
	text-transform: uppercase;
	/*background-color: #3F4345;*/
}

ul.topnav li a:hover {
	background-color: #C8D0D7; 
	color: #D8610C;
	border-bottom: 1px solid #D8610C;
  
  margin-bottom: -1px;
}

ul.topnav li a.active {
	background-color: #C8D0D7;
	color: #D8610C;
	border-bottom: 1px solid #D8610C;
  margin-bottom: -1px;
}



ul.bottom-nav {
	list-style-type: none;
	/*position: fixed; */
	overflow: hidden;
	margin: 0 0 -40px 0;
	padding: 0 0 0 400px;
	background-color: #110E0C;
	/*width: 100%;
   top: 0; */
}

ul.bottom-nav li {
	float: left;
}

ul.bottom-nav li a {
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;
	padding: 14px 30px;
	text-transform: uppercase;
	/*background-color: #3F4345;*/
}

ul.bottom-nav li a:hover {
	background-color: #C8D0D7; 
	color: #D8610C;
	border-bottom: 1px solid #D8610C;
}

ul.bottom-nav li a.active {
	background-color: #C8D0D7;
	color: #EA6E00;
	/* border-bottom: 1px solid #D8610C; */
}





header {
	width: 100%;
	padding: 2px;
	color:black;
	background-color: #EBEEF1;
	text-align: center;
	overflow: hidden;
}

header img {
	
	height: 150px;
	width: 150px;
	margin-left: 900px; 
	float:left;
	
}
header p {
	padding: 40px;
}

.section-1 {
	background-color: #333333;
	height: 425px;
}

.section-1 img {
	border: 1px solid white;
	width: 500px;
	height: auto;
}

.section-1 h3 {
	color: white;
	padding-bottom: 10px;
	text-align: center;
}

.section-1 p {
	color: white;
	width: 600px;
	padding: 0;
	margin: 0;
	line-height: 20px;
}

.main-topic {
	display: table;
	border: 2px solid green;
	margin: 0 auto;
}

.left-text{
	display: table-cell;
	vertical-align:middle;
	background-color: #632712;
	border: 5px solid #F1F0F0;
}

.right-picture{
	display: table-cell;
}

.right-picture > img{
	display: block;
}

.clear{
	clear: both;
}

.section-2 {
	background-color: #EBEEF1;
	height: 574px;
}

.col-1 {
	position: relative;
	top: -72px;
	left: -7px;
	float:left;
	width: 506px;
	height: 245px;
	/* margin: 10px; */
	border: 1px solid rgba(230, 231, 232, 0.55);
	margin: 28px 0 0 403px;
}

.col-2 {
	position: relative;
	top: -44px;
	left: -355px;
	float: left;
	width: 506px;
	height: 245px;
	/* margin: 10px; */
	border: 1px solid rgba(230, 231, 232, 0.55);
	margin: 0 0 0 434px;
}

.col-3 {
	position: relative;
	top: -4px;
	left: -355px;
	float: left;
	width: 506px;
	height: 245px;
	/* margin: 10px; */
	border: 1px solid rgba(230, 231, 232, 0.55);
	margin: 0 0 0 434px;
}

.col-4 {
	position: relative;
	top: -250px;
	left: -38px;
	float: left;
	width: 506px;
	height: 245px;
	/* margin: 10px; */
	border: 1px solid rgba(230, 231, 232, 0.55);
	margin: 0 0 0 434px;
}

.caption {
	text-align: left;
	background-color: #C8D0D7;
}

.caption h4 {
	padding: 20px 0 20px 20px;
	font-size: 30px;
	font-weight: bold;
}
.caption p {
	text-indent: 2em;
	font-style: italic;
	font-weight: bold;
}


.caption button {
	background-color: black;
	color:white;
	margin: 10px 0 0 15px;
}

.col-4 > .caption > ul {
	padding: 0 0 0 30px;
	list-style-image: url("http://nadeausoftware.com/sites/nadeausoftware.com/files/bullets/arrow_10x10_large.png");
	font-weight: bold;
	line-height: 2;
}

.col-3 > .caption > ul {
	padding: 0 0 0 30px;
	list-style-image: url('smile.png');
	font-weight: bold;
	line-height: 2;
     color:black;
}

.nav {
	margin-bottom: 0;
}
<body>
	<nav>
		<ul class="topnav">
			<li><a class="active" href="#home">home</a></li>
			<li><a href="#hospitalitystaff">hospitality staff</a></li>
			<li><a href="#whychooseus">why choose us</a></li>
			<li><a href="#testimonials">testimonials</a></li>
			<li><a href="#faq">faq</a></li>
			<li><a href="#termsandconditions">terms and conditions</a></li>
			<li><a href="#contactus">contact us</a></li>
			
		</ul>
	</nav>

	<header>
		<img src="https://s-media-cache-ak0.pinimg.com/564x/02/10/26/0210268f040d46c1bb46e4b31087da61.jpg">
		<p>Call Us Now <br> 020 7183 3263</p>
	</header>

	<section class="section-1">
		<div class="main-topic">
			<div class="left-text">
				<div class="left-text-background">
					<h3>Deadpool Fans Petition 'SNL' for Superhero to Host</h3>
					<p>
						Deadpool fans want its superhero to host Saturday Night Live — Deadpool, that is, not Ryan Reynolds. Fans of the Merc With a Mouth, who led the Marvel film to a history-making debut at the box office, have launched a Change.org petition calling for the antihero to host an upcoming episode of the NBC sketch comedy show. "We've all seen the trailers, the magazine covers, the viral videos, and the billboards by now, so what's left for Deadpool (Ryan Reynolds) to do?" creator Andrew Stege asks in the petition, which is directed to SNL, creator Lorne Michaels, parent.
					</p>
				</div>
			</div>
			<div class="right-picture">
				<img src="http://cdn3.whatculture.com/wp-content/uploads/2015/10/f5S3dvUb.jpg">
			</div>
			
		</section>

		<section class="section-2">
			
			<div class="col-1">
				<div class="caption">
					<h4>Hospitality Staff</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

					<button type="button">Read More</button>
					
				</div>

			</div>

			<div class="col-2">
				<div class="caption">
					<h4>Catering</h4>
					<p>&nbsp; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
					<button type="button">Read More</button>
				</div>
			</div>

			<div class="col-3">
				<div class="caption">
					<h4>Testimonials</h4>
					<ul class="list-upcomma">
						<li><p>Benchmark-quality staff</p></li>
						<li><p>Don't metter how hard you try</p></li>
						<li><p>Find the best solution</p></li>
						<li><p>Try your best</p></li>
						<li><p>Or just fuck it, you will die anyway</p></li>
					</ul>
					<button type="button">Read More</button>
				</div>
			</div>

			<div class="col-4">
				<div class="caption">
					<h4>Why Choose Us: </h4>

					<ul class="ul arrow">
						<li>Benchmark-quality staff</li>
						<li>Don't metter how hard you try</li>
						<li>Find the best solution</li>
						<li>Try your best</li>
						<li>Or just fuck it, you will die anyway</li>
					</ul>

				</div>

			</div>
			
		</section>
        <div class="clear"> </div>
		<nav class="navigation">
			<ul class="bottom-nav">
				<li><a class="active" href="#home">home</a></li>
				<li><a href="#hospitalitystaff">hospitality staff</a></li>
				<li><a href="#whychooseus">why choose us</a></li>
				<li><a href="#testimonials">testimonials</a></li>
				<li><a href="#faq">faq</a></li>
				<li><a href="#termsandconditions">terms and conditions</a></li>
				<li><a href="#contactus">contact us</a></li>

			</ul>
		</nav>

相关问题
最新问题