发表新帖
发表新帖

How to increase the clickable area of a tag button?

前端 未结
关注
11 1419
悲哀的现实
悲哀的现实 2021-01-29 22:04

I have learnt from this post that always use tags or

相关标签:
11条回答
  • 囚心锁ツ
    2021-01-29 22:21

    use position css property and set top,right,bottom and left to Zero.. set z-index if needed in my case in i used text-indent because i dont want to show link "text" but if you want to show link "text" , just don't use text-indent 

    display:block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px;
    0 讨论(0)
  • 南笙
    2021-01-29 22:26

    For me the padding solution wasn't good, as I was using border on the button, and would've been hard to put modify the markup to create an overlay for the touch area.

    So what I did, is I just used the :before pseudo tag, and created an overlay, which was perfect in my case, as the click event propagated the same way.

    button.my-button:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    top: -6px;
    left: -5px;
}
    0 讨论(0)
  • 清酒与你
    2021-01-29 22:27

    Big thanks to the contributors to the answers here, it pointed me in the right direction.

    For the Bootstrap4 users out there, this worked for me. Sets the a link (tap target) to correct size to pass the Lighthouse Site Audit on mobiles.

        <span class="small">
         <a class="d-inline position-relative p-3 m-n3" style="z-index: 1;" href="/AdvancedSearch" title="Advanced Site Search using extra optional filters">Advanced Site Search</a>
    </span>
    0 讨论(0)
  • 予麋鹿
    2021-01-29 22:29

    If you're using HTML 5, i.e. the doctype

    <!doctype html>

    then you can just use block-level links.

    <a href="google.com">
  <div class="hello">
    ..
  </div>
</a>
    0 讨论(0)
  • 清酒与你
    2021-01-29 22:31

    Edit:

    @t1m0thy's answer is more elegant than mine, better follow his advices.

    Also, nice link proposed by @aldemarcalazans in the comments: https://davidwalsh.name/html5-buttons.

    Original answer:

    Use <a /> when you need a link (the a of anchor). Use <button /> when you need a button.

    That said, if you really need to expand an <a />, add the CSS attribute display: block; on it. You'll then be able to specify a width and/or a height (i.e. as if it were a <div />).

    0 讨论(0)
  • 太阳男子
    2021-01-29 22:32

    Yes you can if you are using HTML5, this code is valid not otherwise:

    <a href="#foo"><div>.......</div></a>

    If you are not using HTML5, you can make your link block:

    <a href="#foo" id="link">Click Here</a>

    CSS:

    #link {
  display : block;
  width:100px;
  height:40px;
}

    Notice that you can apply width, height only after making your link block level element.

    0 讨论(0)
 看不清?
提交回复
热议问题