0

私は次のものを持っています：

    <a href="http://www.youtube.com/"  title="Tonight">
    <img src="images/video.jpg" alt="Tonight Icon" />Hotel </a>

これはクリック可能な画像とその下のテキスト - ホテルもクリック可能なものです。

jpg とテキスト (ホテル) の周りに境界線を配置して、すべてが境界線内に収まるようにするにはどうすればよいですか。

私は試した：

    <div border="1px">
    <a href="http://www.youtube.com/"  title="Tonight">
    <img src="images/video.jpg" alt="Tonight Icon" border="1" />Hotel </a></div>

しかし、それはjpegとテキストの周りに境界線を置きませんでした.

4

4 に答える 4

1

CSS を使用して要素レベル (インライン) でスタイルを設定できます。

<div style="border: 1px solid #000000;">
<a href="http://www.youtube.com/"  title="Tonight">
<img src="images/video.jpg" alt="Tonight Icon" />Hotel </a></div>

これは、ここで読むことができる境界線プロパティの簡略表記を使用します。

アップデート

インライン要素をブロック要素内に含める必要があることを示すW3 (時代遅れですが、原則は残っています) で詳述されている視覚的な書式設定モデルに関して自然な流れがあり、したがって、書式設定 (この場合は境界線) はブロックで発生する必要があります。レベル。この例のリンク/画像/テキストは要素内にある必要があるため、スタイリングはレベルで行う必要があります。内にを確実に含めることができますが、スタイリングはブロック要素で行われます。<p><div><img><p>

于 2012-09-20T15:13:22.643 に答える
0

リンクにスタイルを追加します。

<a href="http://www.youtube.com/"  title="Tonight" style="border:1px solid #000000; display:inline-block;">
    <img src="images/video.jpg" alt="Tonight Icon" border="1" />
    Hotel 
</a>

編集: ブラウザー間の互換性のために display:inline-block を追加しました。

于 2012-09-20T15:12:30.653 に答える
0

CSSを使用してこれを行う適切な方法は次のとおりです。

スタイルシートで、クラスを作成します。

<style>
    .withBorder {
        board:1px solid #000000;
    }
</style>

ラッピング DIV でそのクラスを使用します。

<div class="withBorder">
    <a href="http://www.youtube.com/"  title="Tonight">
    <img src="images/video.jpg" alt="Tonight Icon" border="1" />Hotel </a>
</div>

HTML をスタイリングから分離することをお勧めします。インライン スタイル タグを使用しても機能しますが、別のボックスを使用してスタイルを設定し、後で外観を変更することにした場合は、各 HTML インライン スタイルを個別に編集する代わりに、CSS クラスを編集できます。

于 2012-09-20T15:14:38.160 に答える
0 
<div style="border:2px">
    <a href="http://www.youtube.com/"  title="Tonight">
    <img src="images/video.jpg" alt="Tonight Icon" border="1" />Hotel </a>
</div>
于 2012-09-20T15:15:36.203 に答える