我想将导航栏的一个元素放在两行上。导航栏在1行,但在2行的一个元素
但是,当我刚刚添加一个<br />
里面,它打破了一切。
以下是我有:
这里是我的html代码:
div class="nav-top-home-page">
<nav>
<div>
<div>
<a><img class="logo" src="./assets/img/logo.png" height="200px"></a></div>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a (click)="openLoginModal()"><img src="./assets/img/LOCK.png"/>ME CONNECTER</a></li>
<li><a id="subscribe" routerLink='./register'>M'INSCRIRE</a></li>
<li id="nav-gestionnaire"><a>Vous êtes <br/> GESTIONNAIRE ?</a></li>
</ul>
</div>
</nav>
</div>
这里是我的CSS代码:
.nav-top-home-page{
height:600px;
position: relative;
z-index: 5;
background-color: #6f8ab1;
text-align: center;
}
.nav-top-home-page::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(assets/img/home/slide1.png) white center top no-repeat;
background-size: cover;
}
.nav-top-home-page nav div{
padding-top: 10px;
margin-left: 20px;
margin-right: 20px;
}
.nav-top-home-page nav .logo{
float:left;
}
.nav-top-home-page nav ul{
padding: 0px;
margin: 0px;
float: right;
}
.nav-top-home-page nav li{
display: inline;
}
.nav-top-home-page nav li a{
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}
.nav-top-home-page nav li {
cursor: pointer;
}
#nav-gestionnaire{
display: inline;
}
我试过改变width
,或者加入whitespace: nowrap
和其他许多东西,但没有任何效果。
有人可以帮我吗? :/
当然出现这种情况,与70像素线高...删除该行高,设置高度,而不是使元素取期望的空间,并研究有什么其他方法来垂直居中文本内容... – CBroe