4

我有一个样式为表格导航的无序列表，需要如下所示选项卡示例：为了给选项卡圆角，每个选项卡都有左侧、中间和右侧div以及各自的 css 背景*。

当我像这样（jsFiddle）格式化列表项时：

<li class="tab">
    <div class="item-wrap"><span class="item-before"></span><span class="item"><a href="inventories">Inventory</a></span><span class="item-after"></span></div>
</li>

我得到了想要的结果：正确渲染的结果

但是当我格式化 HTML 以使其更具可读性时，就像这样（jsFiddle）：

<li class="tab">
  <div class="item-wrap">
    <span class="item-before"></span>
    <span class="item">
      <a href="inventories">Inventory</a>
    </span>
    <span class="item-after"></span>
  </div>
</li>

渲染变化：渲染结果不正确

到底是怎么回事？

*注意：我知道这种方法已经过时了。我为之构建的类将我们限制为 HTML 4 和 CSS 2。

4

4 回答 4

2

我无法完全解释它，但它与a元素周围的空白有关......

这正确呈现...

<span class="item"><a href="inventories">Inventory</a></span>

这不...

<span class="item"> <a href="inventories">Inventory</a> </span>

a因此，重新格式化 HTML 会在元素周围引入空格。

于 2013-04-25T00:18:26.500 回答
1

W3教我们：

默认情况下，块级元素的格式不同于内联元素。通常，块级元素从新行开始，而行内元素则不然。有关空格、换行符和块格式的信息，请参阅文本部分。

在引用的链接中

对于除 PRE 之外的所有 HTML 元素，空格序列分隔“单词”（我们在这里使用术语“单词”来表示“非空格字符的序列”）。在格式化文本时，用户代理应该识别这些词，并根据特定的书面语言（脚本）和目标媒体的约定对它们进行布局。

所以基本上，由于您的元素默认为内联元素，因此您的标签被视为“单词”，因此在呈现文本时标签之间的空格确实很重要。

基本上，此时，您可能不想要两件事：

  1. 将所有代码写在一行中
  2. 使用额外的 CSS 能够将标签放在单独的行中

好吧，至少我不想要这个。这就是我使用haml生成HTML 的原因。像许多 HTML 模板引擎一样，它允许您处理标签之间的空格，而无需重新缩进代码

于 2013-04-25T02:33:49.640 回答
1

浏览器将换行符视为空格（如文字空格字符）。

于 2013-04-25T00:14:46.880 回答
1

HTML 将多个空白字符压缩到一个空格中，这已不是什么秘密。

然而，鲜为人知的是该空间属于什么元素。

考虑这个 HTML：<b> <i> spaces!</i></b>

元素周围的两个空间i将被压缩，但生成的空间是在它里面还是外面？

当您有不同的缩进时，这种差异是导致您的 HTML 呈现不同的原因。

就个人而言，我喜欢使用 PHP 来回显这样的 HTML，所以我可以在源代码的多行中使用它，但只输出一行 HTML：

<?php
echo "<span>"
    ."Hello, world!"
  ."</span>";
?>

结果是：

<span>Helld, world!</span>
于 2013-04-25T00:56:27.320 回答