Question

我从这个post学到了总是使用<a>标签或<button>标签来制作按钮。现在我正在尝试使用<a>标记。我的问题是：有没有办法增加标签可点击区域？假设我在div框中使用<a>。我希望整个div框成为一个按钮。我可以将点击区域更改为整个div框吗？谢谢你的帮助。

Answer 1

要增加文本链接的区域，可以使用以下css;

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}

显示：需要内联块，以便设置边距和填充
职位需要相对，以便...
z-index可用于使可点击区域保持在随后的任何文本之上。
填充增加了可以点击的区域
负边距保持周围文本的流量应该是（谨防重叠链接）

Answer 2

修改

@t1m0thy's answer比我更优雅，更好地遵循他的建议。

另外，@aldemarcalazans在评论中提出了很好的链接：https://davidwalsh.name/html5-buttons。

原始回答：

当您需要链接（锚）时使用<a />。需要按钮时使用<button />。

也就是说，如果您确实需要展开{{1}}，请在其上添加CSS属性<a />。然后，您就可以指定宽度和/或高度（即好像它是display: block;）。

Answer 3

是的，如果您使用的是 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。

Answer 4

如果您使用的是HTML 5，即doctype

<!doctype html>

然后你可以使用block-level links。

<a href="google.com">
  <div class="hello">
    ..
  </div>
</a>

Answer 5

只需制作主播display: block和width/height: 100%即可。例如：

.button a {
    display: block;
    width: 100%;
    height: 100%;
}

jsFiddle：http://jsfiddle.net/4mHTa/

Answer 6

将padding添加到锚标记的CSS类中。如果需要，请根据您想要的可点击区域单独添加padding-top，padding-bottom，....它对我有用。

Answer 7

您可以尝试使用display：block或display：inline-block。可以在这里找到一个很好的教程：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Answer 8

对我来说，填充解决方案不好，因为我在按钮上使用了边框，因此很难修改标记以为触摸区域创建覆盖。

所以我所做的是，我只是使用了：before伪标记，并创建了一个叠加层，对于我来说，这是完美的，因为click事件以相同的方式传播。

button.my-button:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    top: -6px;
    left: -5px;
}

Answer 9

使用位置css属性并将top，right，bottom和left设置为零。如果需要，设置z-index 就我而言，我使用了text-indent，因为我不想显示链接“ text”，但是如果您想显示链接“ text”，那就不要使用text-indent

display:block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px;

Answer 10

非常感谢这里提供答案的作者，它为我指明了正确的方向。

对于在那里的Bootstrap4用户来说，这对我有用。将链接（点击目标）设置为正确大小，以通过手机上的Lighthouse Site Audit。

    <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>

Answer 11

我发现的简单方法：在“ a” 标签列表项的右侧添加“ li” 标签

<li></span><a><span id="expand1"></span></a></li>

在CSS文件上，在下面创建此文件

#expand1 {
 padding-left: 40px;
}

如何增加<a> tag button?</a>的可点击区域

11 个答案: