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>

したがって、HTML を再フォーマットすると、a要素の周りに空白が導入されます。

于 2013-04-25T00:18:26.500 に答える
1

ブラウザーは改行を空白として扱います (リテラルのスペース文字のように)。

于 2013-04-25T00:14:46.880 に答える
1

HTML が複数の空白文字を 1 つのスペースに凝縮していることは周知の事実です。

ただし、あまり知られていないのは、その空間がどの要素に属しているかです。

次の HTML を検討してください。<b> <i> spaces!</i></b>

要素の周囲の 2 つのスペースiは凝縮されますが、結果として得られるスペースは要素の内側にあるのでしょうか、それとも外側にあるのでしょうか?

この違いが、インデントが異なる場合に HTML のレンダリングが異なる原因となっています。

個人的には、PHP を使用して次のように HTML をエコーアウトするのが好きなので、ソース内の複数の行にそれを含めることができますが、HTML の 1 行のみを出力できます。

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

結果:

<span>Helld, world!</span>
于 2013-04-25T00:56:27.320 に答える
1

W3 teach us:

By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not. For information about white space, line breaks, and block formatting, please consult the section on text.

And in the cited link

For all HTML elements except PRE, sequences of white space separate "words" (we use the term "word" here to mean "sequences of non-white space characters"). When formatting text, user agents should identify these words and lay them out according to the conventions of the particular written language (script) and target medium.

So basically, since your elements are defaulted by inline elements, your tags are handled as a "word", and so the spaces between your tags does counts when rendering the text.

Basically, at this point, there are two things you might not want:

  1. Write all your code at one line
  2. Use extra CSS to be able to put the tags in separated lines

Well, at least I would not want this. That is why I use haml to generate HTML. Like many HTML template engines, it Allows you to handle white spaces between tags without re-indenting your code

于 2013-04-25T02:33:49.640 に答える