ホームページ >ウェブフロントエンド >CSSチュートリアル >ナビゲーション バーのリスト項目のクリック可能領域を拡張するにはどうすればよいですか?

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

DDD
DDDオリジナル
2024-11-01 01:30:01480ブラウズ

How to Extend the Clickable Area of List Items in Navigation Bars?

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

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

解決策:

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

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

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

    例:

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

    <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>
    <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 サイトの他の関連記事を参照してください。

  • 声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。