Question

这是一个奇怪的：

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

名称和项目元素之间的额外空格和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

您正在查看一个奇怪且长期存在的错误，margin inline-block个float元素会在发生一些不同的事情时被撤消。其中一个方法是将元素的结尾和开始标记格式化为彼此相邻，另一个是给元素.name, .item { float: left; // right or left, depending on what you're trying to accomplish }，这可能是纠正问题的最佳方法。

>ionic start mydemo blank
>cd mydemo
>ionic platform add android
>ionic build android

border-box：元素之间的额外字符会导致换行

1 个答案: