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

Question

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

标签： javascripthtmlcssline-breaks

Answer 1

选项1：

使输入显示：块和浮动：左

.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>