問題描述

兩個div屬性都是display：inline-block;但是一個有內容一個沒有內容 為什么會出現高低不平的現象？
看效果~

.div-3, .div-4 {display: inline-block;width: 100px;height: 50px;line-height: 50px;background: #003366;text-align: center;} .div-3 a, .div-4 a {color: #fff; } div-2 .div-1, .div-2 {display: inline-block;width: 100px;height: 50px;line-height: 50px;background: #003366;text-align: center;vertical-align: top; } .div-1 a, .div-2 a {color: #fff; } div-1 div-2

解決方法是給inline-block元素添加vertical-align:middle or top or bottom

造成原因是inline-block內的元素基線變了

轉載于:https://www.cnblogs.com/jcomey/p/4134296.html

總結

以上是生活随笔為你收集整理的display:inline-block的全部內容，希望文章能夠幫你解決所遇到的問題。

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