html缩小页面div换行,写html代码时div之间换行后浏览器页面inline-block子元素被挤到另一行的诡异问题...

至始至终都找不到一个好的标题来形容这个现象，不过在大量搜索资料后得知原因是

CSS的inline-block换行引发的间隙，最终也按大佬们的方法解决了问题，记录一下。

DEMO:

.list {width: 509px; border: 1px solid #cccccc;}

.list div{ display: inline-block; color:#ffffff; background-color: cadetblue; width: 125px; margin-right: 3px; font-size: 18px; text-align: center; height: 60px; line-height: 60px;}

.list div:nth-child(4n){margin-right: 0px;}

源代码换行产生 css间隙

床

前

明

月

源代码不换行 一切正常

床

前

明

月

父元素增加 font-size:0;-webkit-text-size-adjust:none; 解决源代码换行产生 css间隙

床

前

明

月

标签: css

非特殊说明，本博所有文章均为博主原创。

最新文章