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

Question

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

Answer 1

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

Answer 2

Đặt thẻ liên kết chứa phần đệm thay vì li. Bằng cách này, nó sẽ chiếm toàn bộ khu vực.

Answer 3

Xác định tài sản css thẻ neo của bạn như:

{display:block} 

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

siêu, siêu muộn để bên này, nhưng dù sao: bạn cũng có thể tạo kiểu neo như một flex mục. Điều này đặc biệt hữu ích cho các mục danh sách được sắp xếp theo 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; 
} 

(Nên biết trước:. Flexboxes được obvs vẫn không được hỗ trợ tốt Autoprefixer để giải thoát!)

Answer 7

Sử dụng sau:

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

Answer 8

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

pointer-events:all; 

Vì vậy, bạn có thể xử lý liên kết với jQuery hoặc JavaScript hoặc chúng tôi e thẻ a, nhưng tất cả các yếu tố thẻ khác bên trong li nên có thuộc tính CSS:

pointer-events:none;