无法去除内联块元素之间的空格 [英] Can't get rid of spaces between inline-block elements

问题描述

请看下面的例子:http://jsfiddle.net/Gv6w3/

如您所见，这是一个将菜单项设置为 display:inline-block; 的简单示例，我要做的就是让菜单项彼此对齐 - 我有边距设置为0px，但我无法摆脱它们之间的间距?这是怎么回事??

编辑:刚刚注意到重复，我不好:如何去除 inline-block 元素之间的空格?, display: inline-block 额外边距

解决方案

把一个元素的结束标签和下一个元素的开始标签放在同一行:

第 2 项</div><div class="top-menu-item">项目 3

内联元素采用它们之间的空格，这将呈现为 1 个空格.如果将下一个元素直接放在前一个元素之后，则中间没有空格，空格将消失.

Please see the following example: http://jsfiddle.net/Gv6w3/

As you can see, it's a simple example of menu items set to display:inline-block; All I'm trying to do is get the menu items flush against each other- I have margins set to 0px, but i can't get rid of the spacing between them? What is going on??

EDIT: Just noticed duplicates, my bad: How to remove the space between inline-block elements?, display: inline-block extra margin

解决方案

put the close tag of one and the open tag of the next element on the same line:

<div class="top-menu-item">
Item 2
</div><div class="top-menu-item">
Item 3</div>

Inline elements take the whitespace that is between them and this renders as 1 space. If you put the next element directly after the previous there will be no whitespace in between and the space will be gone.

这篇关于无法去除内联块元素之间的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！