Tôi đã học được từ điều này post luôn sử dụng các thẻ <a> hoặc <button> để tạo nút. Bây giờ tôi đang cố gắng sử dụng thẻ <a>. Câu hỏi của tôi là: có cách nào để tăng diện tích thẻ có thể nhấp không? Giả sử tôi đang sử dụng <a> trong hộp div. Tôi muốn toàn bộ hộp div trở thành một nút. Tôi có thể thay đổi vùng nhấp vào toàn bộ hộp div không? Cảm ơn sự giúp đỡ của bạn.Làm cách nào để tăng diện tích có thể nhấp của nút thẻ <a>?
Sử dụng <a /> khi bạn cần liên kết (số a của neo). Sử dụng <button /> khi bạn cần một nút.
Điều đó nói rằng, nếu bạn thực sự cần mở rộng một <a />, hãy thêm thuộc tính CSS display: block; vào đó. Sau đó, bạn sẽ có thể chỉ định chiều rộng và/hoặc chiều cao (tức là như thể nó là <div />).
Nếu bạn đang sử dụng HTML 5, ví dụ: các loại tài liệu được
<!doctype html>
sau đó bạn chỉ có thể sử dụng block-level links.
<a href="google.com">
<div class="hello">
..
</div>
</a>
Có bạn có thể nếu bạn đang sử dụng HTML5, mã này là hợp lệ không khác:
<a href="#foo"><div>.......</div></a>
Nếu bạn không sử dụng HTML5, bạn có thể làm cho liên kết của bạn block:
<a href="#foo" id="link">Click Here</a>
CSS:
#link {
display : block;
width:100px;
height:40px;
}
Lưu ý rằng bạn chỉ có thể áp dụng width, height chỉ sau khi tạo phần tử cấp khối liên kết.
Chỉ cần đặt neo display: block và width/height: 100%. Ví dụ:
.button a {
display: block;
width: 100%;
height: 100%;
}
jsFiddle: http://jsfiddle.net/4mHTa/
chính xác những gì tôi cần, cảm ơn –
Bạn có thể thử sử dụng display: block hoặc display: inline-block. Bạn có thể tìm thấy hướng dẫn hay tại đây: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Để tăng diện tích của liên kết văn bản bạn có thể sử dụng css sau;
a {
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}
Phần đệm làm tăng diện tích có thể được nhấp, lề âm giữ luồng văn bản xung quanh như vậy (hãy cẩn thận với các liên kết chèn). Hiển thị: inline-block là bắt buộc để lề và đệm có thể được đặt và vị trí cần phải tương đối sao cho chỉ mục z có thể được sử dụng để làm cho khu vực có thể nhấp ở trên đầu bất kỳ văn bản nào sau đó.
hoạt động hoàn hảo trong trường hợp của tôi. –
đây là câu trả lời thực sự về * cách tăng diện tích có thể nhấp của nút thẻ * – StefansArya
thật thông minh! –
thêm padding vào lớp CSS của thẻ liên kết. Nếu được yêu cầu, hãy thêm padding-top, padding-bottom, ... riêng lẻ theo khu vực có thể nhấp mà bạn muốn. Nó làm việc cho tôi.
Điều này hoạt động hoàn hảo, và câu trả lời của bạn đến trong tốc độ ánh sáng. Đá của bạn! Cảm ơn bạn rất nhiều. –
Nếu bạn lo lắng về ngữ nghĩa, câu trả lời của t1m0thy có vẻ là lựa chọn đúng đắn. Xem: https://davidwalsh.name/html5-buttons – aldemarcalazans