html - 边框框 : extra characters between elements causes wrap

Question

这是一个奇怪的:

<div class='menu-side'>
  <div>
    <div class='name'>
      Name
    </div>
    <div class='item'>
      Item
    </div>
  </div>
</div>

name 和 item 元素之间的额外空格和 CRLF 导致它们即使使用 box-sizing: border-box 也会换行定义

我想保持源代码的格式不变，不删除多余的空格，也不添加 white-space: nowrap因为这就是box-sizing: border-box实现。

https://jsfiddle.net/zm7u5ayj/

(重新创建:删除元素之间的所有字符成为:</div><div class='item'>)

非常感谢任何帮助。

编辑:此问题中提供的肮脏技巧 How to remove the space between inline-block elements?对我来说不是令人欣慰的解决方案。

Answer 1

您正在查看一个奇怪且长期运行的错误，该错误与 inline-block 元素的 margin 有关，当发生一些不同的事情时，该错误会被撤消。其中一件事是将元素的结束和开始标记格式化为彼此相邻，另一件事是为元素赋予 float，这可能是解决您的问题的最明智的方法。

.name, .item {
  float: left; // right or left, depending on what you're trying to accomplish
}