【发布时间】:2016-12-08 05:24:08
【问题描述】:
所以我有一个位于导航栏下方和另一个 div 上方的 div。我似乎无法消除该div上方和下方的差距,有什么想法吗?
注意:我已经从 HTML 和 CSS 代码中删除了所有内容和细节,以使其在视觉上更简单。
body {
margin: 0;
padding: 0;
}
nav {
height: 57px;
background: black;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.72);
}
nav ul {
padding: 0;
margin: 0 auto;
}
nav ul li {
list-style: none;
font-family: arial;
font-size: 15px;
}
nav ul li a {
text-decoration: none;
float: left;
display: block;
padding: 20px 20px;
color: white;
font-weight: bold;
border-top: solid 3px black;
margin: 0 0px;
}
body {
overflow: scroll;
height: 950px;
overflow-x: hidden;
}
.servicesContent {
font-family: arial;
margin: 0 auto;
}
.upperService {
width: 70%;
margin: 0 auto;
background: white;
padding: 0 10px;
box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
-webkit-box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
}
.servicesH1 {
text-align: center;
}
.contentLists {
width: 100%;
text-align: center;
background-color: grey;
padding: 25px 0;
height: 450px;
margin-top: 0;
}
<body class="serviceBody" id="bodyColour">
<div class="wrapper">
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li><a id="active" href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</nav>
<div class="servicesContent">
<div class="upperService">
<h1 class="servicesH1">Services</h1>
<h2>What we do</h2>
<p>gap gap gap gap gap gap gap gap gap gap gap gapgap gapgap gap gap gap gap gap gapgap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gapgapgapgapgap gap gap gap gap gap gap gap gap gap gap gap.
<br>gap gap vvikfapfkakfapdofksapdokaspokdsapdkpokdasokdpaskdpoaskfpajf jf afj afjpaf jpoopasj f.
<br>jhadjk djkh dkjhshd kjsah dkjsah dkjash dkjah dksajhd kjashfkahf kashf kasjfh kjasfh kjasfh kajsfh akf hkajsfhksaf hkasf hkasf haskf hn</p>
<p>List:</p>
</div>
<div class="contentLists">
</div>
【问题讨论】:
-
我认为 overflow:hidden 是最好的选择