6

これはばかげた質問かもしれませんが、これを行うためのより良い方法または適切な方法があれば、ぜひ学びたいです。

最近、レンダリングされた HTML ページのバージョンに小さなスペースが表示される場合を含め、これに数回遭遇しました。テキストやエンティティの外側では、ページの HTML の書式設定は問題にならないはずですが、明らかに問題があるため、これらは存在しないはずだと直感的に思います。

私が言及しているのはこれです - 私は、クライアントがサイトをどのように見せたいかについての Photoshop ファイルをいくつか持っています。彼らは、基本的にこのファイルの画像に完全なピクセルを表示することを望んでいます。

ページ内の場所の 1 つはメニュー バーを必要とし、ホバリング時にそれぞれが変更ビットを実行し、ハイパーリンクなどのように機能します。Photoshop ファイルでは、これは 1 つの長いバーであるため、安価で簡単な方法は次のとおりです。そのセグメントを複数の画像に分割し、ファイル内でそれらを隣り合わせに配置するだけです。

思わずこんな感じに並べてみました（まだまだありますが要点は以上です）

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

など。

問題は、画像間にこの小さなスペースがあることです。これは、クライアントがこのことをピクセルパーフェクトにすることを望んでいるため（そして、見た目が悪いだけです）、受け入れられません。

適切にレンダリングする方法の 1 つは、画像間のキャリッジ リターンを削除することです。

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

これにより、画像が互いに真っ直ぐになります（望ましい効果）が、行が信じられないほど長くなり、コードの保守がより困難になります（ここでSOでラップされ、これは簡略化されたバージョンです-実際のものはより長いファイル名とJavaScriptを持っていますホバリングを行うために振りかけました）。

これは起こるべきではないように思えますが、HTML のキャリッジ リターンが小さな空白としてレンダリングされているようです。そして、これはすべてのブラウザで発生します。

上記の 2 つのスニペットが同じようにレンダリングされるはずだと考えるのは正しいですか、それとも間違っていますか? そして、私が間違っていることはありますか？間違ったエンコーディングでファイルを保存している可能性がありますか? 代わりに、これらのリンクをすべて完全に配置された CSS 要素にする必要がありますか?

4

7 に答える 7

14

空白 (キャリッジ リターンを含む) は通常、すべてのブラウザーでスペースとして表示されます。

要素を次々に配置する必要がありますが、トリックを使用できます。

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

これも少し見栄えが悪いですが、それでも 1 行よりはましです。フォーマットを変更することもできますが、要点は要素間ではなく要素内に改行を追加することです。

于 2008-09-25T17:26:33.633 に答える
7

これがあなたのページにとって十分に一般的かどうかはわかりませんが、これらの特定の aタグを分類して、すべてをフロートさせることができます。そうすれば、HTML がどのようにフォーマットされていても、それらは束になります。 

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>
于 2008-09-25T17:30:11.377 に答える
2

これは HTML 仕様の一部です。スペースはマークアップに含まれているため、ドキュメントの一部と見なされます。

あなたが持っている唯一の他のオプションは、フォーマットが嫌いなので、htmlタグを壊すことです:

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

私の意見では、これは望ましくないか、HTML を動的に作成します - JavaScript を使用するか、テンプレート システムと動的 html を使用します。

于 2008-09-25T17:27:53.490 に答える
2

理由は簡単です。HTML では空白が重要ですが、1 回だけです。繰り返される空白は無視され、最初の空白のみが表示されます。

これを回避する唯一の確実な方法は、要素間に空白を入れないことです。

テーブル ベースのレイアウトが現在よりも少なくなる場合は、境界線ゼロ、パディング ゼロのテーブルを使用して、要素をソース コード内の別々の行に配置しながら整列させることができます。

于 2008-09-25T17:33:40.077 に答える
2

ブラウザはキャリッジ リターンをスペースとして扱うので、上で示した動作は正しいです。それを修正するには、次のようにスタイルを設定できます。

a { display: block; float: left; }

上記のルールはすべてのリンクに適用されるため、セレクターを特定の要素のみに絞り込みたい場合があることに注意してください。

#nav a { display: block; float: left; }
于 2008-09-25T17:33:51.073 に答える
2

これを処理する方法は、順序付けられていないリストを使用し、各画像/リンクをアイテムにすることです。次に、CSS を使用して各アイテムをインラインで表示し、左にフロートさせます。

これにより、柔軟性が大幅に向上し、マークアップが非常に読みやすくなります。

于 2008-09-25T17:36:13.330 に答える
1

Web サイトでタブ付きのインターフェイスを作成する場合は、適切に作成するために多大な労力を費やす必要があります。CSS タブの実装の優れた例を示す Web サイトは多数あります。そのうちの 1 つを使用することを検討してください。

これには、CSS + Javascript / AJAXタブがたくさんあります。または、この一連の単純な CSS の例(一部はスタイル付き) を参照してください。最後に、この非常にクールなタブ ジェネレーターをチェックしてください。

于 2008-09-25T17:33:49.437 に答える