如圖，當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的高度。

轉載于:https://www.cnblogs.com/beileixinqing/p/8074469.html

總結

以上是生活随笔為你收集整理的ul li列表元素浮动导致border没有底边解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。