display: inline-block的多个元素width相加100%，结果元素错位

两个或多个display为inline-block的元素，如果以下几种情况：

  1. 两个元素之间本来没有空格或者间距，而展示出来的页面两个元素之间却有空格；
  2. 两个或多个元素相加本来是100%的，却出现了错位，最后一个元素被挤到下一行去了；

那么，原因是：

display为inline-block的元素之间（源代码上），如果之间有空格，那么渲染出来的页面元素时间也会有空格，也就是间距。
多个元素之间之所以会错位，是因为原本的100%加上空格，实际上已经超过100%了，当然后面的元素会被挤到下一行啦。

解决方案：

在源代码中把所有的空格去掉，就OK了。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容