html - 导航栏deconnexion按钮悬停在两行上

我希望将鼠标悬停在菜单“ Bonjour Toi”上时出现一个deconnexion按钮。

但是它以2行而不是1行显示。

因为可以根据用户名更改“ Toi”，所以当名称较长时，菜单deconnexion将正确显示在1行上。

这是我现在所拥有的：



这是我的html代码：

.nav-top {
  background-color: #475162;
  height: 70px;
  width: 100%;
  text-align:center;
  padding:10px;
}

.nav-top nav .logo{
  float:left;
}

.nav-top nav .logo{
  margin-left:20px;
}
.nav-top nav ul {
  padding: 0px;
  margin: 0px;
  float: right;
}

.nav-top nav ul {
  margin-right: 50px;
}

.nav-top nav li {
  display: inline;
}

.nav-top nav li a  {
  color: white;
  font-size: 1em;
  line-height: 70px;
  padding: 5px 15px;
  cursor: pointer;
  font-family: Raleway, arial;
}

.nav-top ul li a.active {
  border: solid 1px #FF307E;
}

.nav-top ul  li a:hover:not(.active)  {
  border: solid 1px #FF307E;
}

/* BUTTON DECONNEXION */
.nav-top nav ul li{
  display:inline-block;
  position:relative;
}
.nav-top nav ul li ul{
  position:absolute;
  z-index: 1000;
  max-height:0;
  left: 0;
  right: 0;
  overflow:hidden;
}
.nav-top nav ul li:hover ul{
  max-height:15em;
}

.nav-top nav ul li ul a{
  padding:8px 5px;
  text-decoration: none;
}

.nav-top nav ul li ul a img{
  vertical-align:middle;
}

 .nav-top nav ul li:hover li a{
   background-color: #FF307E;
   color:white;
   text-transform:inherit;
}

<div class="nav-top">
  <nav>
    <div>
      <div>
        <a routerLink='./'><img class="logo" src="./assets/img/logo.png" height="70px"></a>

      <ul>
        <li><a>BLOG</a></li>
        <li><a>CONTACT</a></li>
        <li><a>SUPPORT</a></li>
        <li ><a class="active ">Bonjour {{nameUserConnected}}</a>
          <ul>
            <li><a (click)="confirmLogout()"><img src="./assets/img/logout.png" width="17px" />&nbsp;Déconnexion</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>

如何在同一行上获取deconnexion +图标？

最佳答案

您在这里遇到一些问题。绝对位置的ul将具有其相对元素的宽度。包含li的Bonjour Toi。这就是为什么更长的时间会适合。如果文本较小，则ul不适合。您还对其设置了overflow:hidden，您需要将其删除

我更改了一些代码（我将其设置为背景图像的图像，而padding-left的a等于图像的宽度，请根据需要进行更改）

所有新的/更改的代码都位于CSS样式的顶部

见下文

.nav-top nav ul li ul {
  position: absolute;
  z-index: 1000;
  max-height: 0;
  left: 0;
  top: 100%;
  display: none;
}

.nav-top nav ul li ul li a {
  padding-left: 30px;
  background: url('https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico') no-repeat scroll left center #FF307E;
}

.nav-top nav ul li ul {
  width: 100%;
  display: none;
}

.nav-top nav ul li:hover > ul {
  display: block;
  overflow: visible;
}

.nav-top {
  background-color: #475162;
  height: 70px;
  width: 100%;
  text-align: center;
  padding: 10px;
}

.nav-top nav .logo {
  float: left;
}

.nav-top nav .logo {
  margin-left: 20px;
}

.nav-top nav ul {
  padding: 0px;
  margin: 0px;
  float: right;
}

.nav-top nav ul {
  margin-right: 50px;
}

.nav-top nav li {
  display: inline;
}

.nav-top nav li a {
  color: white;
  font-size: 1em;
  line-height: 70px;
  padding: 5px 15px;
  cursor: pointer;
  font-family: Raleway, arial;
}

.nav-top ul li a.active {
  border: solid 1px #FF307E;
}

.nav-top ul li a:hover:not(.active) {
  border: solid 1px #FF307E;
}


/* BUTTON DECONNEXION */

.nav-top nav ul li {
  display: inline-block;
  position: relative;
}

.nav-top nav ul li:hover ul {
  max-height: 15em;
}

.nav-top nav ul li ul a {
  padding: 8px 5px;
  text-decoration: none;
}

.nav-top nav ul li ul a img {
  vertical-align: middle;
}

.nav-top nav ul li:hover li a {
  background-color: #FF307E;
  color: white;
  text-transform: inherit;
}

<div class="nav-top">
  <nav>
    <div>
      <a routerLink='./'><img class="logo" src="./assets/img/logo.png" height="70px"></a>
      <ul>
        <li><a>BLOG</a></li>
        <li><a>CONTACT</a></li>
        <li><a>SUPPORT</a></li>
        <li><a class="active ">Bonjour Toi</a>
          <ul>
            <li><a (click)="confirmLogout()">Déconnexion</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>

关于html - 导航栏deconnexion按钮悬停在两行上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45320816/