正如其他人所说的
li a { display: block; }
你希望达到的效果可以通过以下代码实现。然而,你还需要从<li>中删除任何填充,并在<a>上设置它。例如:
li { padding: 0; }
li a { display: block; padding: 1em; }
calc
计算整个高度:height: calc(100% - 4px)
- 假设该元素具有padding: 2px
。 - gion_13display:block; height: 100%; width: 100%;
,这将使其完全填充其父元素(前提是父元素是没有填充的块元素,而且<a>没有边距和兄弟元素)。@Arthur Medeiros - Ola Tuvessonli a {
display: block;
}
当然,你需要使你的选择器比那个更具体。<ul>
<li class="myClass">
<a href="#">Link</a>
</li>
</ul>
li.myClass a {
display: block;
background-color: #fdd; /* Demo only */
}
A
标签将您的LI
内容包装起来。然而,没有看到那个具体的细节很难说。 - Jared Farrish这将使整个区域可被点击。
li a { display: block; }
li{
border:1px solid black;
height:40px;
}
li a{
border:1px solid red;
display:block;
height:100%;
}
height:100%;
与display:block;
一起使用就可以解决问题。谢谢+1! - Tenaciousd93li a{
display: inline-table;
height:95%;
width: 95%;
}
95是指预留5%的空间用于任何li元素的边距和填充。
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;
让它们像块级元素一样工作,但同时与其他元素保持在同一行。 - Jesse我使用的另一个选项是在 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;
}