html元素之间的换行符打破html布局

Question

我知道元素之间的html换行符被视为空格，但我认为当你尝试使用自适应布局时，这是非常可怕的。

例如，这里我们有预期和正确的行为，但要获得它我必须删除元素之间的html中的换行符： https://jsfiddle.net/xew2szfu/1/

<div class="recommend-friend__dialog">You should see only me</div><div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>

在这里，我像往常一样使用换行符编写html，并且所有内容都被破坏了： https://jsfiddle.net/rL1fqwkc/1/

<div class="recommend-friend__dialog">You should see only me</div>
<div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>

我知道我可以通过浮动解决问题：左，但我想知道我是否遗漏了某些东西，默认行为对我来说听起来真的不对。

Answer 1

这种情况正在发生，因为inline-block在元素之间放置了一个空格，并且第二个div向下移动了空间，因为它不再适合该行。

有很多方法可以解决这个问题。正如你所说，浮动就是其中之一。 This excellent CSS Tricks article is a great help,但是我会过去你想要的那些：

负边距：

nav a {
  display: inline-block;
  margin-right: -4px;
}

很简单，你可以有一个漂亮的html格式，但是移动元素来隐藏空间。

将font-size设置为0：

.recommend-friend__slider{
  font-size: 0;
}
.recommend-friend__dialog {
  font-size: 12pt;
}

或者，我个人最喜欢的，跳过内联块并改为使用flexbox。