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

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

順序なしリストを使用して作成された一般的な水平ナビゲーション バーでは、リスト項目の任意の場所をクリックすると、おそらく、カーソルがリンク自体のテキスト内にある場合にのみアクションがトリガーされます。クリック可能な領域をリスト項目全体に拡張するには、HTML と CSS を次のように変更します。

CSS:

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

'li からパディングを削除します。 ' 要素を追加してアンカー タグに追加すると、クリック可能領域がリスト項目の幅と高さ全体を埋めるように拡張されます。

HTML:

<code class="html"><div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div></code>

ユーザーはリスト項目内の任意の場所をクリックして対応するリンクをアクティブにできるようになり、よりユーザーフレンドリーなナビゲーション バーが提供されます。

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