如何删除 html 中的换行敏感度？ [复制]

Question

我在网上看到了很多答案，但它们仅适用于文本，这里我的问题是换行符以某种方式在框之间创建了一个空格。在 sn-p 中，我删除了最后一个输入元素之前的换行符，并对其进行了修复，但是由于我要对这些输入元素应用许多属性，因此该行会导致太长并且会影响代码的易读性。我怎样才能让它忽略换行符？考虑一下将它们放在一个带有 nowrap 的 div 中是行不通的，因为它不是文本。

.box {
  width: 1em;
  height: 1em;
  padding: 0px;
  margin: -1px;
  border: 2px solid black;
}

<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" /><input type="text" class="box" />

Answer 1

我建议将它们放入 div 和 display:flex; flex-direction:row;

Answer 2

选项 1：

使输入 display:block 和 float:left

.box {
  width: 1em;
  height: 1em;
  padding: 0px;
  margin: -1px;
  border: 2px solid black;
  display: block;
  float: left;
}

<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" /><input type="text" class="box" />

选项 2：

使输入的容器具有 font-size:0px 但为输入提供正常的字体大小

.box {
  width: 1em;
  height: 1em;
  padding: 0px;
  margin: -1px;
  border: 2px solid black;
  font-size: 16px;
}

.container {
  font-size: 0px;
}

<div class="container">
  <input type="text" class="box" />
  <input type="text" class="box" />
  <input type="text" class="box" />
  <input type="text" class="box" />
  <input type="text" class="box" />
  <input type="text" class="box" />
  <input type="text" class="box" /><input type="text" class="box" />
</div>