4

可能重复：
忽略 HTML 中的空格

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

问题发生的地方

为了描述所有需要的成分，我允许用户在现有的成分表单字段中添加更多的成分表单字段，这些字段是由 HTML 预先定义的。您可以通过按下“添加另一种成分”按钮来添加这些新字段。一个名为 addIngredient() 的 JavaScript 函数被称为 onclick（为了清楚起见，它被截断，完整的代码可以在这里找到）：

function addIngredient() {
  ingredientCount++;

  //define the elements that should be created
  var Group = document.createElement("span");
  var Quantity = document.createElement("input");
  var Unit = document.createElement("input");
  var Type = document.createElement("input");
  var lineBreak = document.createElement("br");

  //set the attributes for each element
  Group.setAttribute("id", "ingredient_" + ingredientCount);
  Quantity.setAttribute("type", "text");
  Unit.setAttribute("type", "text");
  Type.setAttribute("type", "text");

  //add the ingredient group span and linebreak to the ingredients div
  var ingredientList = document.getElementById("ingredienten");
  ingredientList.appendChild(Group);
  ingredientList.appendChild(lineBreak);

  //add the ingredient form elements to the ingredient group span
  var addElements = document.getElementById("ingredient_" + ingredientCount);
  addElements.appendChild(Quantity);
  addElements.appendChild(Unit);
  addElements.appendChild(Type);
}

发生什么了

通过 JavaScript 添加的输入元素与 HTML 预先创建的元素之间的间距似乎不同。这是显示视觉错误的屏幕截图：

间距差异

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

有回报：

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

没有回报：

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

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

我的问题

坦率地说，我有点震惊，在我的 HTML中点击 return显然会在网页上输出一些间距。我觉得代码格式化会导致在页面上添加东西是荒谬的。我不想删除代码中的返回以防止它发生。

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

4

4 回答 4

2

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

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

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

没有任何尝试使代码看起来很漂亮：

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

那（或类似的东西）应该以与硬编码的间隔相同的方式间隔动态输入。

于 2012-08-01T14:29:18.263 回答
1

浏览器会进行空格折叠：一个或多个空格字符（空格、制表符、回车）被折叠成一个空格。

我不知道如何规避这种情况。也许您可以将字体大小设置为0？或在您的 JS 中添加一个空格字符。您还可以尝试将输入字段浮动到左侧 ( span > input { float:left; })，它只浮动输入字段而不浮动 span 元素的文本内容。

于 2012-08-01T14:26:22.333 回答
0

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

于 2012-08-01T14:28:59.230 回答
0

正如另一个问题中提到的，这是我知道的唯一解决方案*：

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

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

于 2012-12-15T19:10:41.310 回答