Làm cách nào để tôi có thể nhấp vào toàn bộ khu vực của một mục danh sách trong thanh điều hướng dưới dạng một liên kết?

Tôi có một thanh điều hướng ngang được tạo từ một danh sách không có thứ tự và mỗi mục trong danh sách có rất nhiều phần đệm để làm cho nó trông đẹp mắt, nhưng khu vực duy nhất hoạt động như một liên kết là chính văn bản. Làm cách nào để cho phép người dùng nhấp vào bất kỳ đâu trong mục danh sách để kích hoạt liên kết?

#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;
  padding: 25px 10px;
}

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

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

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

Không đặt đệm vào mục 'li'. Thay vào đó, hãy đặt thẻ liên kết thành display:inline-block;và áp dụng đệm cho nó.

Xác định thuộc tính css thẻ liên kết của bạn là:

{display:block}

Sau đó, neo sẽ chiếm toàn bộ khu vực danh sách, vì vậy nhấp chuột của bạn sẽ hoạt động trong không gian trống bên cạnh danh sách của bạn.

Làm cho thẻ liên kết chứa phần đệm hơn là chứa li. Như vậy sẽ chiếm hết diện tích.

Siêu, siêu trễ cho bữa tiệc này, nhưng dù sao đi nữa: bạn cũng có thể tạo kiểu mỏ neo như một món đồ linh hoạt. Điều này đặc biệt hữu ích cho các mục danh sách có kích thước / sắp xếp động.

a {
  /* This flexbox code stretches the link's clickable 
   * area to fit its parent block. */
  display:        flex;
  flex-grow:      1;
  flex-shrink:    1;
  justify-content: center;
}

(Lưu ý: flexboxes vẫn chưa được hỗ trợ tốt. Tự động sửa lỗi để giải cứu!)

Sử dụng sau:

a {
  display: list-item;
  list-style-type: none;
}

Hoặc bạn có thể sử dụng jQuery:

$("li").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
});

Bạn nên sử dụng thuộc tính CSS này và giá trị vào li:

pointer-events:all;

Vì vậy, bạn có thể xử lý liên kết bằng jQuery hoặc JavaScript hoặc sử dụng athẻ, nhưng tất cả các phần tử thẻ khác bên trong liphải có thuộc tính CSS:

pointer-events:none;

Chỉ cần áp dụng css dưới đây:

<style>
  #nav ul li {
    display: inline;
  }

  #nav ul li a {
    background: #fff;// custom background
    padding: 5px 10px;
  }
</style>

đây là cách tôi đã làm nó

Tạo khối <a>nội tuyến và xóa phần đệm khỏi<li>

Sau đó, bạn có thể chơi với widthvà heightcủa <a>trong<li>

Đặt widthđể 100%như một sự khởi đầu và xem làm thế nào nó hoạt động

Tái bút: - Nhận sự trợ giúp của Công cụ nhà phát triển Chrome khi thay đổi heightvàwidth

Bạn luôn có thể bọc toàn bộ thẻ li bằng thẻ hiperlink Đây là giải pháp của tôi:

#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;
  text-align: center;
  float: left;
  width: 40px;
  padding: 25px 10px;
}

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

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

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

Đặt mục danh sách trong siêu liên kết thay vì theo cách khác.

Ví dụ với mã của bạn:

<a href="#"><li>One</li></a>