如何制作<a> tag the size of it&#39;s parent <li> tag for larger clickable region?</li></a>

Question

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

我的HTML看起来像：

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

Answer 1

正如其他人所说的那样

li a { display: block; }

应该实现你所追求的目标。 但您还必须从＆lt; li＆gt;中移除任何填充。并将其设置在＆lt; a＆gt;代替。例如：

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

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/

Answer 3

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

li a { display: block; }

Answer 4

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

95预测任何li边距或填充

Answer 5

试试这个css

的

的

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

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

的

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

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

希望这有帮助！

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

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