Question

我想将导航栏的一个元素放在两行上。

但是当我在里面添加一个<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等许多内容，但没有任何效果。

有人可以帮助我吗？：/

Answer 1

删除line-height属性并在锚标记上添加display:inline-block

.nav-top-home-page nav li a{
  font-size: 1em;
  padding: 5px 15px;
  cursor: pointer;
  font-family: Raleway, arial;
  display:inline-block;
}

Answer 2

试试这个，使用display:table-cell Here is code

Answer 3

将div包裹在div中

<div>Vous êtes</div> <div>GESTIONNAIRE</div>

Answer 4

尝试使用max-width属性和display:inline-block;并删除锚标记上的line-height

CSS

.nav-top-home-page nav li {
    cursor: pointer;
    display: inline-block;
}

.nav-top-home-page nav li a {
    color: white;
    font-size: 1em;
    padding: 5px 15px;
    cursor: pointer;
    font-family: Raleway, arial;
    color: #212121;
    max-width: 180px;
    display: inline-block;
}

导航条在1行，但在2行上有一个元素

4 个答案: