問題描述

兩個(gè)div屬性都是display：inline-block;但是一個(gè)有內(nèi)容一個(gè)沒有內(nèi)容 為什么會(huì)出現(xiàn)高低不平的現(xiàn)象？
看效果~

.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內(nèi)的元素基線變了

轉(zhuǎn)載于:https://www.cnblogs.com/jcomey/p/4134296.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。