ナビゲーション バーでリスト項目全体をクリックできるようにするにはどうすればよいですか?

リスト領域全体でクリック可能なナビゲーション項目を有効にする

ナビゲーション バーを設計する際、リスト領域全体を必要とする状況に遭遇することがあります。リスト項目は、美的魅力を高めるために十分なパディングにもかかわらず、クリック可能なリンクとして機能します。このガイドでは、この動作を実現する方法について説明します。

アプローチ

ナビゲーション バーでクリック可能なリスト項目を有効にするには、次の手順に従います。

1. リスト項目からパディングを削除します:

   • 「li」要素にパディングを追加しないでください。リスト項目に適用されるパディングにより、クリック可能な領域がテキストのみに制限されます。

2. アンカー タグの強化:

   • アンカー タグ ( 要素) を変更してインライン ブロックを表示します:

     #nav a {
       display: inline-block;
       padding: ...;
     }

   • クリック可能な領域を制御するために、「li」項目の代わりにアンカー タグにパディングを適用します。

使用法

この例では、次の変更によりリスト項目領域全体でクリック可能になります:

#nav li {
  padding: 0;
}

#nav a {
  display: inline-block;
  padding: 25px 10px;
}

コード例

<code class="css">#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
  padding:0;
}

#nav li {
  float: left;
}

#nav li:hover {
  background-color: #785442;
}

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

<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>
<div>
  <h2>Heading</h2>
</div></code>

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