标记的大小相同，以获得更大的可点击区域？

【问题标题】：How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?如何使 <a> 标记的大小与其父 <li> 标记的大小相同，以获得更大的可点击区域？
【发布时间】：2016-01-14 18:13:11
【问题描述】：

我想这样做，以便标签上的可点击区域是LI 的大小。

我的 html 看起来像：

<li>
 <a href="#">Link</a>
</li>

【问题讨论】：

表格单元格相同，明确要求高度填充：stackoverflow.com/questions/3966027/…

标签： html css

【解决方案1】：

正如其他人所说的

li a { display: block; }

应该实现你所追求的。但是您还必须从

中删除任何填充并将其设置在上。例如：

li { padding: 0; }
  li a { display: block; padding: 1em; }

【讨论】：

是的，将填充（如果有）从 li 移动到 a 在这里非常重要。很多教程和示例都没有提到这一点。感谢您指出！
您可以使用填充（或边距/边框）并使用calc 来计算全高：height: calc(100% - 4px) - 假设您在该元素上有padding: 2px。
你可以，但你会引入动态计算高度的完全不必要的开销。不要低估渲染杂乱的 CSS 所浪费的 CPU 周期数； KISS 以获得最大的响应速度。
如果由于某种原因您无法更改父元素的填充，您可以执行 {margin: -x; padding:x} 在 a 标签上，其中 x 是其父级的填充
如果我在
中有，它对我不起作用。我想让整个 div 可点击。

【解决方案2】：

在 CSS 中：

li a {
     display: block;
}

当然，您会希望选择器比这更具体。

<ul>
    <li class="myClass">
        <a href="#">Link</a>
    </li>
</ul>

li.myClass a {
    display: block;
    background-color: #fdd; /* Demo only */
}

http://jsfiddle.net/userdude/jmj2k/

【讨论】：

我之前试过这个CSS属性，它只是横向扩展了标签的宽度，实际上并没有让标签填满

那么我会说您没有为您的问题提供足够的上下文。这是您提供的答案。如果您有特定的实现，则需要在问题中提供。

@Brian - 另一种方法是使用A 标签包装您的LI 内容，具体取决于详细信息。但是，如果没有看到这个细节，就很难说。

【解决方案3】：

这将使整个区域都可以点击。

li a { display: block; }

【讨论】：

我之前试过这个CSS属性，它只是横向扩展了标签的宽度，并没有让标签变成父
标签的大小>

【解决方案4】：

li a{     
display: inline-table;
height:95%;    
width: 95%;
}

95 预测任何 li 边距或填充

【讨论】：

如果您需要 a 标签旁边的一些元素，请使用此选项。比如图标之类的。

【解决方案5】：

试试这个css

li{
    border:1px solid black;
    height:40px;
}

li a{
    border:1px solid red;
    display:block;
    height:100%;
}

【讨论】：

添加height:100%; 和display:block; 对我有用。谢谢+1！

【解决方案6】：

如果您目前有同样的问题，您可以简单地将填充添加到正确的位置：

li {
  //remove any padding or margin attributes from here
}

li a {
  display: block;
  padding: 20px; //or however big you want the clickable area to be
}

锚标签默认是内联元素，所以你必须明确地将它们更改为显示为块元素，然后才能弄乱填充或边距。

希望这会有所帮助！

【讨论】：

您还可以使用display: inline-block; 使它们像块一样工作，但同时与其他元素保持一致。

【解决方案7】：

我使用的另一个选项是在 Photoshop 中创建一个透明的 png 图像并将其放在锚标签内，使其位置为绝对并增加其尺寸以适合您想要的父 div，并且您可以拥有一个大的可点击区域。

<a href="test.html" />
 <img id="cover_img" src="cover.png" />
</a>

#cover_img {
display: block;
height: 200px;
width: 193px;
position: absolute;
}

在某些情况下可能有用。

【讨论】：