当在一行中需要展示多个拥有块级属性的标签元素时,通常选择display:inline-block;
优点:不用设置浮动或定位,浮动脱离文档流还需要清除浮动,定位降低扩展性。
问题:
1、标签元素之间会出现间隙(原因:inline-block拥有默认字体大小属性,包括标签的换行);
2、当标签内容为空时,会造成布局错乱(原因:inline-block默认字体对齐方式是vertical-align:baseline;即底部对齐);
解决:
间隙处理:
1、给父级元素设置定位;
2、元素标签不换行;
3、父级元素的font-size:0;清除字体影响;
4、浮动;
布局错乱:
1、浮动;
2、定位;
3、设置verticle-align:top;字体上对齐;(推荐!)