アンカータグを引き伸ばしてリストアイテムのスペース全体を埋めるにはどうすればよいですか?

アンカー タグを拡張するための解決策

アンカー タグ () をリスト項目 (

) 内のスペース全体に埋めるには、次のことが必要です。アンカータグのデフォルトのインライン特性を克服するため。 などのインライン要素には、通常、幅や高さが固定されていません。

インライン要素の問題の性質は、テキストを流すために使用することから発生します。行の折り返しが不確実であることを考えると、インライン要素に固定幅を設定することは意味がありません。

アンカー タグの幅制御を有効にするには、その表示プロパティを変更することが重要です。 2 つの有効なオプションが存在します:

表示プロパティ オプション:

• ブロック: このオプションは、アンカー タグをブロック レベルの要素に変換します。
• Inline-Block: このオプションは、インライン プロパティとブロック プロパティを組み合わせて、アンカー タグが幅制御に応答しながらインライン テキストのように動作できるようにします。

コード例:

ブロックまたはインラインブロック表示プロパティを適用するには、以下に示すように CSS を使用します。

<code class="css">a.wide {
    display: block;
}

a.wide-inline {
    display: inline-block;
}</code>

HTML 実装:

変更した表示プロパティを HTML コードに組み込みます。

<code class="html"><ul id="menu">
  <li><a class="wide" href="javascript:;">Home</a></li>
  <li><a class="wide-inline" href="javascript:;">Test</a></li>
</ul></code>

注:

IE6 ではインライン要素の幅を設定できますが、この動作は CSS の実装が正しくないと考えられます。

以上がアンカータグを引き伸ばしてリストアイテムのスペース全体を埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。