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

Question

在做一个二级菜单组件，二级子菜单的宽度不是固定的，随文本自适应。
但二级子菜单的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;
}

Answer 1

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

Answer 2

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

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

Answer 3

宽度不够了呗