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

问题描述

问 题

在做一个二级菜单组件，二级子菜单的宽度不是固定的，随文本自适应。
但二级子菜单的span和a标签明明设置了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阻止其换行

这篇关于bug - 为什么display:inline-block失效了？求解答的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！