提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

ul li列表元素浮动导致border没有底边解决办法

列表 元素 没有 解决办法 导致 浮动 border li
2023-09-14 09:07:44 时间

如图，当ul li，li元素浮动，并且ul元素也overflow:hidden清除浮动的时候，给li元素加了border,但是不显示底边，这时候要看是不是没有给li元素加高，因为加了border之后默认li的高度会继承ul的，再加上border的像素则超出了ul的高度，而高度设置了overflow：hidden;所以被遮盖住了其中一个边。

ul{
        width:60%;
        margin:0 auto;
        overflow: hidden;
        box-sizing: border-box;
        height:50px;
        line-height:50px;
        border-radius: 5px;
        text-align: center;
      }
      li{
        width:50%;
        box-sizing: border-box;
        float: left;
        border:2px solid @pubColor;
        color:@pubColor;
        background-color:#fff;
        /*height:50px;*/
        /*line-height:50px;*/
      }

当ul有高，li也加了高了之后就可以正常显示border了，最终li元素高度为本身高度+border高度=ul的高度。

相关文章