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

SennTyou

于 2016-11-10 17:11:13 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： web

7 篇文章

订阅专栏

本文介绍了当使用CSS的display属性设置为inline-block时，元素间出现意外间距及错位的问题，并提供了解决方案：通过去除源代码中的空格来确保元素正确对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

那么，原因是：

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

解决方案：

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