首页 > 为什么display:inline-block失效了?求解答

为什么display:inline-block失效了?求解答

在做一个二级菜单组件,二级子菜单的宽度不是固定的,随文本自适应。
但二级子菜单的spana标签明明设置了display:inline-block,不知道为什么不在同一行。

代码如下:
html:

<ul class="nav">
        <li class="nav-item ">
            <span class="nav-item-icon"></span>
            <a href="">Found</a>
        </li>
        <li class="nav-item">
            <span class="nav-item-icon"></span>
            <a href="">Found</a>

            <ul class="nav-sub">
                <li class="nav-item">
                    <span class="nav-item-icon"></span>    
                    <a href="">Foundddaaaaaaaddd</a>
                </li>
                <li class="nav-item">
                    <span class="nav-item-icon"></span>    
                    <a href="">Founddaaaaadddd</a>
                </li>
            </ul>
        </li>
        <li class="nav-item">
            <span class="nav-item-icon"></span>
            <a href="">Found</a>
        </li>
    </ul>

CSS:

.nav {
  background-color: #e17268;
}
.nav .nav-item:hover {
  cursor: pointer;
  background-color: #3176b0;
}
.nav .nav-item:hover .nav-item-icon {
  background-image: url("../image/nav_004.png");
}
.nav .nav-item:hover a {
  color: white;
}
.nav-item {
  float: left;
  position: relative;
  display: inline-block;
  background-color: #36b97a;
  padding: 14px;
}
.nav-item .nav-item-icon {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  background-image: url(../image/like.png);
  background-size: contain;
}
.nav-item a {
  display: inline-block;
  vertical-align: top;
  padding-top: 4px;
  padding-bottom: 2px;
}
.nav-sub {
  position: absolute;
  top: 48px;
  left: 0;
  background-color: #ffcd41;
}

会换行是因为你li的宽度超过父级li的宽度了,所以会换行,你可以加个white-space: nowrap阻止其换行


宽度不够了呗


同意楼上,.nav-item里加个white-space: nowrap

.nav-item {
  float: left;
  position: relative;
  display: inline-block;
  background-color: #36b97a;
  padding: 14px;
  white-space: nowrap
}
【热门文章】
【热门文章】