如何删除 html 中的换行敏感度？

Question

我在网上看到了很多答案，但它们只适用于文本，这里我的问题是换行符以某种方式在框之间创建了 space。在代码片段中，我删除了最后一个输入元素之前的换行符，并对其进行了修复，但由于我要将许多属性应用于这些输入元素，因此该行会变得太长并且会影响代码的易读性。我怎样才能让它忽略换行符？考虑将它们放在带有 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

选项 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>

Answer 2

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

如何删除 html 中的换行敏感度？

How do I remove line break sensitivity in html?

html

javascript

css

line-breaks

选项 1：

选项 2：