Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Memanjangkan Kawasan Boleh Diklik Item Senarai dalam Bar Navigasi?

Bagaimana untuk Memanjangkan Kawasan Boleh Diklik Item Senarai dalam Bar Navigasi?

DDD
DDDasal
2024-11-01 01:30:01474semak imbas

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

Meluaskan Kawasan Item Senarai Boleh Diklik dalam Bar Navigasi

Bar navigasi selalunya menampilkan senarai tidak tertib dengan item senarai empuk. Walau bagaimanapun, kawasan boleh klik untuk pengaktifan pautan biasanya terhad kepada teks itu sendiri. Untuk mempertingkatkan pengalaman pengguna, anda boleh menjadikan keseluruhan item senarai boleh diklik.

Penyelesaian:

Elakkan menambah padding pada

  • unsur. Sebaliknya, gunakan CSS berikut pada teg dalam setiap item senarai:

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

    Ini memastikan kawasan yang boleh diklik berkembang ke keseluruhan item senarai, sambil mengekalkan padding dan reka letak yang diingini.

    Contoh:

    Pertimbangkan HTML dan CSS yang diberikan:

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

    Dengan menggunakan paparan: inline-block; dan sifat padding pada teg sauh, kawasan yang boleh diklik bagi setiap item senarai memanjang ke seluruh lebar item, tanpa menjejaskan reka letak asalnya.

    Atas ialah kandungan terperinci Bagaimana untuk Memanjangkan Kawasan Boleh Diklik Item Senarai dalam Bar Navigasi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

  • Kenyataan:
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn