Question

我已经彻底搜寻了一个解决方案，但没有运气。我有一个带有ul的响应式导航，我试图隐藏使用max-height: 0，基本的东西。它在div周围没有边框时有效，但是当我为它添加边框时，底部和顶部边框显示（就好像UL已关闭）。

这是标记：

   <nav id="menu">
      <ul>
        <li id="li_1" ><a href="#">text</a><img class="li-ico" src="" alt="" /></li>
        <li id="li_2" ><a href="#">text</a><img class="li-ico" src="" alt="" /></li>
        <li id="li_3" ><a href="#">text</a><img class="li-ico" src="" alt="" /></li>
        <li id="li_4" ><a href="#">text</a><img class="li-ico" src="" alt="" /></li>
      </ul>
    </nav>

和css：

#menu {
 right: 0;
 top: 100%;
 line-height: 30px;
 padding: 0 10px;
 border:1px solid red;
 border-radius:3px;
 max-height: 0;
 opacity: 1;

 -webkit-transition: max-height 0.4s ease-in-out;
 -ms-transition: max-height 0.4s ease-in-out;
 -moz-transition: max-height 0.4s ease-in-out;
 -o-transition: max-height 0.4s ease-in-out;
 transition: max-height 0.4s ease-in-out;
}

像我说的那样，当我删除边框时，div被隐藏得很好，但是边框不是..建议？

Answer 1

为什么你试图用max-height隐藏它？

如果你想完全隐藏它

#menu {
   display: none;
}

如果您必须使用边框尝试使用

#menu {
   box-sizing: border-box;
}

borderbox将边框放在div的内部而不是外部。

为什么'max-height：0'无法完全隐藏我的div？

1 个答案: