ナビゲーション バーのリスト項目のクリック可能領域を拡張するにはどうすればよいですか?

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

ナビゲーション バーには、多くの場合、パッドされたリスト項目を含む順序なしリストが表示されます。ただし、リンクをアクティブにするためのクリック可能な領域は通常、テキスト自体に限定されます。ユーザー エクスペリエンスを向上させるために、リスト項目全体をクリック可能にできます。

解決策:

にパディングを追加しないようにします。要素。代わりに、次の CSS を に適用します。各リスト項目内のタグ:

a {
  display: inline-block;
  padding: [desired padding values];
}

これにより、必要なパディングとレイアウトを維持しながら、クリック可能な領域がリスト項目全体に拡張されます。

例:

指定された HTML と CSS を検討します。

<code class="html"><div id="nav">
  <img src="/static/imghwm/default1.png" data-src="/images/renderedicon.png" class="lazy" alt="Icon"    style="max-width:90%"  style="max-width:90%">
  <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 id="Heading">Heading</h2>
</div></code>

<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;
}

#nav li {
  display: block;
  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>

次の表示を適用します。プロパティをアンカー タグにパディングすると、元のレイアウトに影響を与えることなく、各リスト項目のクリック可能領域が項目の幅全体に拡張されます。

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