Dowiedziałem się z tego post, które zawsze używają znaczników <a> lub znaczników do wykonania przycisku. Teraz próbuję użyć tagu <a>. Moje pytanie brzmi: czy istnieje sposób na zwiększenie obszaru klikalnego tagu? Powiedz, że używam <a> w polu div. Chcę, aby całe pole div stało się przyciskiem. Czy mogę zmienić obszar klikania na całe pole div? Dzięki za pomoc.Jak zwiększyć obszar klikalny przycisku znacznika <a>?
Zastosowanie <a /> kiedy trzeba linka (The z kotwica). Użyj <button />, gdy potrzebujesz przycisku.
To powiedziawszy, jeśli naprawdę potrzebujesz rozwinąć <a />, dodaj do niego atrybut CSS display: block;. Będziesz wtedy mógł określić szerokość i/lub wysokość (to jest tak, jakby były <div />).
Jeśli używasz HTML 5, czyli doctype
<!doctype html>
następnie można po prostu użyć block-level links.
<a href="google.com">
<div class="hello">
..
</div>
</a>
Tak można, jeśli używasz HTML5, ten kod jest ważny nie inaczej:
<a href="#foo"><div>.......</div></a>
Jeśli nie używasz HTML5, można dokonać linku block:
<a href="#foo" id="link">Click Here</a>
CSS:
#link {
display : block;
width:100px;
height:40px;
}
Zauważ że można zastosować width, height tylko po dokonaniu elementu łączącego blok poziomie.
Po prostu wykonaj kotwicę display: block i width/height: 100%. Np:
.button a {
display: block;
width: 100%;
height: 100%;
}
jsFiddle: http://jsfiddle.net/4mHTa/
dokładnie to, czego potrzebuję, dzięki –
Można spróbować użyć display: block lub display: inline-block. Miłego samouczka można znaleźć tutaj: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Aby zwiększyć obszar łącza tekstowego, można użyć następujących css;
a {
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}
Wyściółka zwiększa obszar, który może być kliknięty marża ujemna utrzymuje przepływ otaczającego je tekstu, jak powinno być (uwaga ponad docierania linków). Wyświetlanie: blok inline jest wymagany, aby można było ustawić marginesy i dopełnienie, a pozycja musi być względna, aby można było użyć z-index, aby obszar klikalny pozostał na wierzchu dowolnego następnego tekstu.
działa doskonale w moim przypadku. –
to jest prawdziwa odpowiedź na * jak zwiększyć klikalny obszar przycisku tagu * – StefansArya
tak sprytny w rzeczywistości! –
dodać padding do klasy znacznika kotwicy w CSS. W razie potrzeby dodaj padding-top, padding-bottom, ... indywidualnie zgodnie z żądanym obszarem klikalności. To zadziałało dla mnie.
To działa idealnie, a twoja odpowiedź przyszła z prędkością światła. Twoja skała! Dziękuję bardzo. –
Jeśli martwisz się o semantykę, odpowiedź t1m0thy wydaje się być właściwym wyborem. Zobacz: https://davidwalsh.name/html5-buttons – aldemarcalazans