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

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

要求に応じて、水平ナビゲーション バーは順序なしリストを使用して構造化されています。各リスト項目には十分なパディングが含まれます。ただし、望ましい効果は、テキストのみではなく、リスト項目領域全体がアクティブ リンクとして機能することです。これを実現する方法は次のとおりです。

各リスト項目の全領域をクリック可能にするには、CSS コードを次のように変更します。

<code class="css">#nav a {
  display: inline-block;
  padding: 25px 10px;
}</code>

アンカー タグに inline-block を適用することで (# nav a) の場合、それらはブロック要素のように動作し、垂直方向に整列しながらリスト項目の幅を占めます。これは、以前にリスト項目に適用していたパディング (#nav li) をアンカー タグに適用できることを意味します。

この調整により、パディングを含む各リスト項目の領域全体が、クリック可能なリンクとして認識されます。以下のコード スニペットは、必要な変更を示しています。

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

リスト項目からパディングを分離することで、リスト項目全体をクリックして関連するリンクをアクティブにできるようにしながら、見た目を維持できます。ユーザーフレンドリーで視覚的に魅力的なナビゲーション エクスペリエンス。

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