如何增加<a>标签按钮的可点击区域？

Question

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

Answer 1

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

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

Answer 2

编辑:

@ t1m0thy的答案比我的更优雅,更好地遵循他的建议.

原始答案:

使用<a />时,你需要一个连接(一个的锚).<button />需要按钮时使用.

也就是说,如果你真的需要扩展<a />,可以display: block;在其上添加CSS属性.然后,您将能够指定宽度和/或高度(即,就好像它是a <div />).

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

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

因此，我只是使用 :before 伪元素并创建了一个覆盖层，这在我的情况下是完美的，因为单击事件以相同的方式传播。

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

<button class="my-button">A button</button>

注意：确保您有position:relative父元素。

Answer 5

只要做锚display: block和width/height: 100%.例如:

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

Answer 6

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

<!doctype html>

那么你可以使用块级链接.

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

Answer 7

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

Answer 8

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