Question

我希望使链接的可点击区域比实际可访问性更大，因为对于预期的用户来说，很难打到它们。大约1.5倍的尺寸可能是合适的。这些是普通文本中的链接，所以我实际上无法将它们做得更大，这会弄乱布局。

我利用HTML5，CSS3，JS甚至Mozilla的特定功能来实现这一点，因为最新的Firefox版本是唯一的目标，虽然基本的CSS / HTML而不是这样的黑客当然会更好！

Answer 1

可能有效的一个选项是使用:after伪元素。像这样：

a {
    position: relative
}
.bigger:after{
    content:"";
    padding: 50px;  
    position: absolute;
    left: -25px;
    top: -25px;
}

可以根据需要调整数字。我唯一能看到的缺点就是你需要在IE8之前支持任何东西。 http://caniuse.com/#feat=css-gencontent

这是fiddle。

Answer 2

你可以使用更大的填充。

例如：

.a{
    padding: 20px;
    margin: -20px; //lets keep the layout
}

这里有一个活生生的例子： http://jsfiddle.net/u5kuJ/1/

<强>更新

随你的小提琴：http://jsfiddle.net/XXgqu/1/

Answer 3

我已经对gotohales回复进行了更新，它可以使用文本的长度，然后添加一些填充。

http://jsfiddle.net/vG7UY/2/

a {
  position: relative;
}
  .biggerForMobile:before{
  content:""; 
  width:100%;
  height:100%;
  position:absolute;
  padding:12px;
  top:-10px;
  left:-10px;
}

Answer 4

您可以使用:after伪元素填充元素，使用transform和position可以将填充位于元素中心的中心，而不会影响其他元素。

将padding: 30px更改为您需要的填充。

.padded-click {
  position: relative; 
}
.padded-click:after{
  padding: 30px;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

注意：这是基于gotohales解决方案，这是一个很好的方法，但是使用顶部和左边的像素值作为gotohales解决方案确实需要考虑我们填充的元素的宽度/高度否则填充将会偏离中心。

Answer 5

我很确定你不能做你想要的。唯一想到的是添加填充，边距和线高。虽然它不是我最喜欢的解决方案，但取决于网站的上下文，可能有一个列出所有链接的页面，其中有更大的目标。

另外，也许可以使用outline＆amp;与人们相识的outline-offset CSS属性具有良好的对比度。链接。

另一件事是，需要更大目标的人，更频繁地使用键盘来浏览网站，因此使您的网站更加键盘友好可能会有所帮助。例如，您是否有一个标题和一个侧边栏，通过代码，这些是否在主要内容之前？如果是这样，放置skip nav链接或少数（取决于布局）也可以提供帮助。

使内嵌链接的可点击区域更大而不影响布局

5 个答案: