我有一个问题,一个flexbox没有填满我的导航栏,我不能为我的生活搞清楚,而负余量绝对没有什么
这是一个截图
.hero {
background-image: url("https://unsplash.it/1500?random");
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: -10px;
}
.hero>.center-content {
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: auto;
}
.hero>.center-content h1,
.center-content h3 {
color: white;
line-height: 1;
}
.hero>.center-content h1 {
text-transform: uppercase;
font-size: 3em;
margin-bottom: 0;
text-align: center;
}
.hero>.center-content h3 {
margin-bottom: 40px;
font-size: 1.5em;
font-weight: normal;
}
.center-content>.button {
text-transform: uppercase;
color: white;
padding: 20px;
border: 1px solid white;
text-decoration: none;
}
.center-content>.button:hover {
background-color: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.7);
color: #006594;
}

<div class="container" id="heroImage">
<div class="hero">
<div class="center-content">
<h1>Lazris</h1>
<h3>Revive Your Web Presence</h3>
<a href="#" class="button">Some Action Here</a>
</div>
</div>
</div>
&#13;
答案 0 :(得分:-1)
删除活动菜单上的边距顶部
.nav > .active {
/** margin-top: 10px; Remove **/
}