内联块如何消除差距

Question

我希望在使用时显示两个div内联，一个div为25％，另一个为75％：

display: inline-block; 

这似乎会在两个div之间产生差距，这显然会导致75％的分数下降。

如何消除差距？我用过：

vertical-align: top; 

这已经消除了最大的差距......现在只需要边缘差距。

请参阅此处jsfiddle。

Answer 1

问题是你的两个 div 元素之间有一个空格，并且因为它们是 inline-block 显示，它呈现的就像是两个之间的空格常规文字中的字母。

解决方案是在容器上使用否定word-spacing：

word-spacing: -1em;

jsFiddle Demo

---

在此处查看更多内容：Fighting the Space Between Inline Block Elements

此处display: inline-block extra margin

Answer 2

这是因为HTML中你的div之间有空格。就像这样：

<div class="grid_one">

</div><div class="grid_two">

</div>

http://jsfiddle.net/npP3p/1/

或者，使用float:left;，但请记住在或为容器提供height之后清除浮动。

Answer 3

只需将float:left;添加到头等舱。

Fiddle

Answer 4

蒂姆是正确的，它是创造边缘的空白。

另一个解决方案是向margin-right: -4px添加.grid_one，检查the updated fiddle。

Answer 5

剩下的漂浮物是你失踪的宝石

Float:left;

http://jsfiddle.net/npP3p/2/

Answer 6

为什么不float: left; div？