如何使<a>标签与其父级<li>标签一样大小，以便扩大可点击区域？

Question

我希望做到的是，使得标签可点击区域的大小与LI标签一致。

我的HTML代码如下：

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

- Alexa Green

---

同样适用于表格单元格，需要明确指定高度填充：https://dev59.com/52865IYBdhLWcg3wIrBg - Ciro Santilli OurBigBook.com

Answer 1

正如其他人所说的

li a { display: block; }

你希望达到的效果可以通过以下代码实现。然而，你还需要从<li>中删除任何填充，并在<a>上设置它。例如：

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

- Ola Tuvesson

---

是的，在这里将（如果有的话）li元素的填充移动到a元素中非常重要。很多教程和示例都没有提到这一点。感谢您指出这一点！ - Joseph

你可以使用padding（或margin/border）并使用calc计算整个高度：height: calc(100% - 4px) - 假设该元素具有padding: 2px。 - gion_13

你可以这样做，但是你会引入完全不必要的动态计算高度的开销。不要低估在渲染混乱的CSS时可能浪费的CPU周期数量；为了最大的响应能力，请保持简单。 - Ola Tuvesson

如果由于某些原因无法更改父元素的填充，您可以在a标签上执行{margin: -x; padding:x}，其中x是其父元素的填充。 - NathanAck

如果我在<div>中有<a>，它对我不起作用。我想让整个<div>可点击。 - Arturio

如果包含<a>的<div>有尺寸，您可以将<a>设置为display:block; height: 100%; width: 100%;，这将使其完全填充其父元素（前提是父元素是没有填充的块元素，而且<a>没有边距和兄弟元素）。@Arthur Medeiros - Ola Tuvesson

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

- Jared Farrish

---

我之前尝试了这个CSS属性，它只会水平扩展<a>标签的宽度，实际上并没有使<a>标签填满<li>。 - Alexa Green

那我会说你没有为你的问题提供足够的上下文。这是针对你提供的内容的答案。如果你有特定的实现想法，你需要在问题中提供相关信息。 - Jared Farrish

@Brian - 如果您的细节不是很清楚，另一种选择是使用A标签将您的LI内容包装起来。然而，没有看到那个具体的细节很难说。 - Jared Farrish

Answer 3

这将使整个区域可被点击。

li a { display: block; }

- Seth

---

我之前尝试过这个CSS属性，它只会水平扩展<a>标签的宽度，而不会使<a>标签的大小与父级<li>相同。 - Alexa Green

Answer 4

尝试使用这个CSS：

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

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

- irockman

---

对我来说，将height:100％;与display:block;一起使用就可以解决问题。谢谢+1！ - Tenaciousd93

Answer 5

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

95是指预留5%的空间用于任何li元素的边距和填充。

- Matoeil

---

如果您需要在a标签之外添加某些元素，例如图标或其他内容，请使用此选项。 - Soggiorno

Answer 6

如果您目前有同样的问题，您可以简单地在正确的位置添加填充(padding)。

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
}

锚点标签默认为内联元素，因此您需要明确将它们更改为块级元素，然后才能调整填充或边距。

希望这可以帮助您！

- Samantha Dove

---

你还可以使用 display: inline-block; 让它们像块级元素一样工作，但同时与其他元素保持在同一行。 - Jesse

Answer 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;
}

在某些情况下可能会有用。

- vaskort