Javascript 我能以某种方式防止代码中的返回在表单元素之间添加间距吗？

可能重复：

我正在创建一个荷兰食谱网站。问题是通过Javascript添加新表单字段时出现的视觉错误

问题发生在哪里 为了描述所有需要的成分，我允许用户在现有的成分表单字段中添加更多成分表单字段，这些字段由HTML预先定义。您可以按“添加其他成分”按钮添加这些新字段。名为AddingCredit（）的javascript函数称为onclick（为了清晰起见，它被截断，可以找到完整的代码）：

发生了什么 通过JavaScript添加的输入元素之间的间距似乎与之前通过HTML创建的输入元素之间的间距不同。以下是显示视觉错误的屏幕盖：

当我从定义预先创建的输入元素的HTML中删除返回值时，多余的间距就会消失

有回报：

<span>
  <input>
  <input>
  <input>
</span><br>

无退货：

<span>
  <input><input><input>
</span><br>

这使我得出结论，用HTML创建的元素实际上受到我编写代码的方式在间距或位置上的影响。当然，使用Javascript创建的表单元素是在没有任何换行符的情况下生成的，因此这些多余的空格不存在

我的问题 坦白地说，我有点震惊，在我的HTML中点击return显然会在网页上输出一些空格。我觉得很可笑的是，代码格式化会导致在页面上添加内容。我不想删除代码中的返回以防止它发生

---

除了从我的代码中删除返回字符外，还有其他方法确保表单元素之间的空格不会显示吗？

浏览器执行空格折叠：一个或多个空格字符（空白、制表符、返回）折叠为一个空格

我不知道如何绕过这一点。也许您可以将字体大小设置为0？或者在JS中添加空格字符。

---

您还可以尝试将输入字段向左浮动（

span>input{float:left；}

），这将只浮动输入字段，而不浮动span元素的文本内容。

任何数量的空白，包括换行符、制表符缩进、多个空格等。HTML标记之间的空白在呈现时都将被视为一个空格。这是HTML的基础。如果您正在处理输出HTML，您需要注意这一点，并在生成HTML的代码中相应地处理它。

在HTML元素中，空白被规范化为单个空格。如果您有一些文本、七个空格字符和更多的文本，那么这七个空格字符将被规范化为一个空格。类似地，如果您有一些文本、一个返回字符和更多的文本，则该返回字符将规范化为单个空格

您可能认为这是不可取的，但如果只是默默地删除返回，则至少会有同样多的奇怪情况

您不能防止这些返回导致输入元素之间存在空格，但可以在每个动态添加的输入元素之后动态插入空格。这样，在所有输入之间都有一个空格，“硬编码”输入和通过脚本添加的输入之间

如果不想让代码看起来漂亮：

var addElements = document.getElementById("ingredient_" + ingredientCount);
addElements.appendChild(Quantity);
addElements.appendChild(document.createTextNode(" "));
addElements.appendChild(Unit);
addElements.appendChild(document.createTextNode(" "));
addElements.appendChild(Type);

（或沿着这些线的东西）应该以硬编码输入的间隔相同的方式间隔动态输入。

如前所述，这是唯一的解决方案*我知道：

<span><!--
    --><input><!--
    --><input><!--
    --><input><!--
--></span><br>

---

*好吧，如果你想称之为解决方案…

在这种情况下，这似乎是一条路要走。谢谢你教我关于空格折叠的知识。我必须说，我完全没有意识到这一点。这是我第一次遇到这样的情况，它实际上是显而易见的。还值得注意的是，在某些情况下，规范允许浏览器有选择地完全删除空白。您可能已经猜到了：不同的浏览器在这里的行为不同。您不能只添加

$nbsp在生成的HTML末尾？当然可以。现在，其他用户已经解释了为什么会发生这种情况，这也提供了一个合适的解决方案！我的意思是
。那是怎么做到的？该死的资本家！我知道这听起来可能是个奇怪的想法，但我是新来的，我不介意对我提问和回答方式的反馈。根据人们通常的做法，我有什么不同或更多的想法吗？我认为你做得很好，你的问题很清楚，你的评论和后续行动都很好。我添加了一条评论而不是一个答案，因为我想提醒人们
，但我不认为这是一个完整的答案。
<span><!--
    --><input><!--
    --><input><!--
    --><input><!--
--></span><br>