태그 버튼 의 클릭 가능한 영역을 늘리는 방법은 무엇입니까?
이 게시물 에서 항상 <a>태그 또는 <button>태그를 사용하여 버튼을 만드는 것을 배웠습니다 . 이제 <a>태그 를 사용하려고합니다 . 내 질문은 : 태그 클릭 가능 영역을 늘리는 방법이 있습니까? <a>div 상자에서 사용 하고 있다고 가정하십시오 . 전체 div 상자가 버튼이되기를 원합니다. 클릭 영역을 전체 div 상자로 변경할 수 있습니까? 도와 주셔서 감사합니다.
편집하다:
@ t1m0thy의 대답 은 내 것보다 더 우아하며 그의 조언을 따르는 것이 좋습니다.
또한 댓글에서 @aldemarcalazans 가 제안한 멋진 링크 : https://davidwalsh.name/html5-buttons .
원래 답변 :
사용 <a />하면 링크 (필요시 의 앵커 ). 버튼이 필요할 때 사용 하세요.<button />
즉,를 확장해야하는 경우 <a />CSS 속성 display: block;을 추가하십시오 . 그런 다음 너비 및 / 또는 높이를 지정할 수 있습니다 (예 : 마치 <div />).
텍스트 링크의 영역을 늘리려면 다음 CSS를 사용할 수 있습니다.
a {
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}
- 디스플레이 : 여백과 패딩을 설정할 수 있도록 인라인 블록이 필요합니다.
- 위치는 상대적이어야합니다.
- Z- 색인을 사용하여 클릭 가능한 영역이 다음 텍스트 위에 유지되도록 할 수 있습니다.
- 패딩은 클릭 할 수있는 영역을 늘립니다.
- 음수 여백은 주변 텍스트의 흐름을 그대로 유지합니다 (겹치는 링크에주의).
예 , HTML5 를 사용하는 경우 가능합니다 .이 코드는 그렇지 않으면 유효 하지 않습니다.
<a href="#foo"><div>.......</div></a>
HTML5를 사용하지 않는 경우 링크를 만들 수 있습니다 block.
<a href="#foo" id="link">Click Here</a>
CSS :
#link {
display : block;
width:100px;
height:40px;
}
당신이 적용 할 수있는 공지 사항 width, height만 링크 블록 레벨 요소를 한 후.
앵커 display: block와 width/height: 100%. 예 :
.button a {
display: block;
width: 100%;
height: 100%;
}
jsFiddle : http://jsfiddle.net/4mHTa/
HTML 5, 즉 doctype을 사용하는 경우
<!doctype html>
<a href="google.com">
<div class="hello">
..
</div>
</a>
padding앵커 태그의 CSS 클래스에 추가하십시오 . 필요한 경우, 추가는 padding-top, padding-bottom... 개별적으로 원하는 클릭 가능한 영역에 따라. 그것은 나를 위해 일했습니다.
display : block 또는 display : inline-block을 사용해 볼 수 있습니다. 좋은 튜토리얼은 여기에서 찾을 수 있습니다 : http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
위치 css 속성을 사용하고 위쪽, 오른쪽, 아래쪽 및 왼쪽을 0으로 설정합니다. 필요한 경우 z-index를 설정합니다. 내 경우에는 텍스트 들여 쓰기를 사용했습니다. 링크 "텍스트"를 표시하고 싶지 않지만 링크를 표시하려면 " text ", 텍스트 들여 쓰기를 사용하지 마세요.
display:block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px;
참조 URL : https://stackoverflow.com/questions/11078509/how-to-increase-the-clickable-area-of-aa-tag-button
'development' 카테고리의 다른 글
| Android Studio- 모듈 없음 (0) | 2020.12.27 |
|---|---|
| Node.js Port 3000이 이미 사용 중이지만 실제로는 그렇지 않습니까? (0) | 2020.12.27 |
| Twitter Bootstrap API를 사용하여 어떤 장치보기에 있는지 감지하는 방법은 무엇입니까? (0) | 2020.12.27 |
| MySQL 사용자에게 호스트 액세스 권한 재 할당 (0) | 2020.12.27 |
| UIScrollView에서 확대 / 축소를 활성화하는 방법 (0) | 2020.12.27 |