我发现了一个纯CSS解决方案，在所有浏览器中都很好地为我工作:

span {
    display: table-cell;
}

在CSS中有一个简单的解决方案。例如:

HTML

<p class="parent">
    <span class="children"> Foo </span>
    <span class="children"> Bar </span>
</p>

CSS

.parent {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
}
.children {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
}

在我看来，在像em这样的项目中使用font-size: 0是不安全的，所以我更喜欢purecss的解决方案。

你可以在这个链接中检查这个框架。享受:)

.row { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; /* For better view */ background: #f9f9f9; padding: 1em .5em; } .col { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; /* For better view */ padding: 16px; background: #dbdbdb; border: 3px #bdbdbd solid; box-sizing: border-box; width: 25%; } <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div>

我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在，因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以，在我的情况下，我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异，所以，我认为这是一个解决方案。

这是相同的答案，我给了相关的:显示:内联块-什么是空间?

实际上，有一种非常简单的方法可以从内联块中删除空白，既简单又语义化。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别上折叠空白(当它们在单独的行上时，由浏览器为内联元素添加)。一旦你声明了字体，你只需要在容器上改变font-family，然后在子容器上再改变，瞧。是这样的:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

很合口味。这里是我刚刚在font-forge中制作的字体下载，并使用FontSquirrel webfont generator进行转换。我只花了5分钟。css @font-face声明包括:压缩零宽度空格字体。它在谷歌驱动器，所以你需要点击文件>下载保存到你的电脑。如果您将声明复制到主css文件中，您可能还需要更改字体路径。

使用PHP括号:

申力 显示屏:inline-block; 的 <德> < li > 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < /德>

有很多解决方案，如字体大小:0，字间距，左距，字母间距等等。

通常我更喜欢使用字母间距，因为

当我们分配一个大于额外空间宽度的值时，这似乎是可以的。1 em)。 然而，当我们设置更大的值如-1em时，word-spacing和margin-left就不合适了。 当我们尝试使用em作为字体大小单位时，使用font-size并不方便。

所以，字母间距似乎是最好的选择。

但是，我必须警告你

当你使用字母间距时，最好使用-0.3em或-0.31em，而不是其他的。

* { margin: 0; padding: 0; } a { text-decoration: none; color: inherit; cursor: auto; } .nav { width: 260px; height: 100px; background-color: pink; color: white; font-size: 20px; letter-spacing: -1em; } .nav__text { width: 90px; height: 40px; box-sizing: border-box; border: 1px solid black; line-height: 40px; background-color: yellowgreen; text-align: center; display: inline-block; letter-spacing: normal; } <nav class="nav"> <span class="nav__text">nav1</span> <span class="nav__text">nav2</span> <span class="nav__text">nav3</span> </nav>

如果你正在使用Chrome(测试版本66.0.3359.139)或Opera(测试版本53.0.2907.99)，你看到的可能是:

如果你使用的是Firefox(60.0.2)、IE10或Edge，你看到的可能是:

这很有趣。所以，我检查了mdn-letter-spacing，发现了这个:

长度 指定除了默认字符间距之外的额外字符间距。值可能是负的，但可能存在特定于实现的限制。用户代理不能为了使文本正确而进一步增加或减少字符间的空间。

看来这就是原因。