タグを引き伸ばして幅全体を埋めるにはどうすればよいですか?-CSSチュートリアル-php.cn

タグを引き伸ばして幅全体を埋めるにはどうすればよいですか?

Susan Sarandon

リリース： 2024-10-26 16:30:03

オリジナル

936 人が閲覧しました

How to Stretch `` Tags to Fill the Entire `` Width?

ストレッチ全体を埋めるタグ

HTML の領域では、

要素はリスト項目のコンテナとして機能します。多くの場合、デザイナーは、の部分を伸ばすことで、これらのアイテムの美しさを向上させようと努めます。

の幅全体を囲むようにその中にタグを追加します。残念ながら、width: 100%; のような CSS プロパティを使用してこれを達成しようとする単純な試みはありません。

この苦境の背後にある根本的な理由は、の性質にあります。タグをインライン要素として使用します。インライン要素には、対応するブロックとは異なり、幅を制御する固有の機能がありません。この設計哲学は、複数行にまたがる可能性のあるフローテキストコンテンツを表現するという主な機能に由来しています。

この制限を回避し、に望ましい動作を与えるためです。タグを使用するには、微妙だがインパクトのある変更が必要です。表示プロパティを block または inline-block に変更すると、

実際には、この変換には、対応する CSS クラスをタグに追加することが必要になります。

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

ログイン後にコピー

さて、このクラスがに適用されると、

内のタグ要素を使用すると、利用可能な水平方向のスペースを埋めるように優雅に引き伸ばされ、目的の効果が完成します。

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

ログイン後にコピー

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