ナビゲーション バーのリスト項目全体をクリック可能にする方法

ナビゲーション バーのリスト項目のクリック可能領域の拡大

順序なしリストを使用して作成された水平ナビゲーション バーでは、次の問題が発生する場合があります。各リスト項目のテキスト部分のみがクリック可能なリンクとして機能します。見た目を良くするためにリスト項目にパディングを追加している場合、これはストレスになる可能性があります。

この問題に対処するには、'li' 要素にパディングを適用すると、クリック可能な領域が制限される可能性があることを理解することが重要です。リスト項目。クリック可能な領域を拡張してリスト項目の幅全体をカバーするには、代わりにアンカー タグ (「a」要素) にパディングを適用する必要があります。

アンカー タグの 'display' プロパティを次のように設定します。 「inline-block」は、テキスト コンテンツのフロー内でインライン要素のように動作しますが、ブロック要素としても扱われるため、幅と高さを受け入れることができます。これにより、アンカー タグにパディングを適用できるようになり、クリック可能な領域がリスト項目の幅全体をカバーするように効果的に拡張されます。

ここでは、アンカー タグの代わりにパディングを適用したコードの更新バージョンを示します。 'li' 要素:

<code class="css">#nav li {
  display: block;
  float: left;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
  display: inline-block;
  padding: 25px 10px;
}</code>

これにより、各リスト項目の領域全体がリンクとしてクリック可能になり、ユーザーが簡単かつ便利に移動できるようになります。

以上がナビゲーション バーのリスト項目全体をクリック可能にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。