display: inline-block的多个元素width相加100%，结果元素错位
2016-11-10 17:11
309 查看
两个或多个display为inline-block的元素，如果以下几种情况：
那么，原因是：
解决方案：
1. 两个元素之间本来没有空格或者间距，而展示出来的页面两个元素之间却有空格； 2. 两个或多个元素相加本来是100%的，却出现了错位，最后一个元素被挤到下一行去了；
那么，原因是：
display为inline-block的元素之间（源代码上），如果之间有空格，那么渲染出来的页面元素时间也会有空格，也就是间距。 多个元素之间之所以会错位，是因为原本的100%加上空格，实际上已经超过100%了，当然后面的元素会被挤到下一行啦。
解决方案：
在源代码中把所有的空格去掉，就OK了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- display:inline-block 消除元素间间隙
- 去掉display:inline-block元素间的多余空白
- IE6、7下块级元素设置display:inline-block不换行的解决办法
- IE下块元素实现 display:inline-block
- display:inline与display:block——行内元素显示与块级元素显示
- display:inline-block下的IE元素
- 关于display:inline-block布局导致错位问题分析
- IE6里面display:inlineblock使得块元素成行排列,没用
- ie7下面不支持块级元素使用display:inline-block的问题
- 如何移除相邻两个 display: inline-block 元素间的间隔
- CSS - display:inline-block 相邻元素间有4px的空白间距
- inline元素设置display:inline-block存在空隙问题
- 块级元素display:inline-block 在IE6 IE7无效
- [ie6]display:inline-block; 的元素不要与字符串放在同一个元素下
- 让IE6区块元素具备display:inline-block属性
- display:inline-block元素间距问题
- 【技术】去掉display:inline-block元素间的多余空白
- 去除display:inline-block下的元素间隔问题
- 两个 display: inline-block 元素间的间隔移除问题
- display:inline-block和元素水平居中的关系