扩展<a>标签以填充整个<li>
扩展<a>标签以填充整个<li>
提问于 2010-07-16 19:33:54
下面是一个简单的菜单结构：
<ul id="menu">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Test</a></li>
</ul>我希望<a>被拉伸，这样它就可以填满整个<li>。我试着使用像width: 100%; height: 100%这样的东西，但是没有效果。如何正确地拉伸锚点标记？
回答 6
Stack Overflow用户
发布于 2010-07-16 19:48:30
只需使用display:block;设置A的样式
ul#menu li a { display: block;}Stack Overflow用户
发布于 2014-10-20 05:54:53
一种不同的方法：
<ul>
<li>
<a></a>
<img>
<morestuff>TEXTEXTEXT</morestuff>
</li>
</ul>
a {
position: absolute;
top: 0;
left: 0;
z-index: [higher than anything else inside parent]
width:100%;
height: 100%;
} 如果链接的容器中也有图像之类的内容，或者根据图像/内容大小可能有不同的大小，这会很有帮助。这样，锚标签本身就可以是空的，你可以在锚的容器中随意排列其他元素。锚点将始终与父级的大小匹配，并且将位于顶部，以使整个li可单击。
Stack Overflow用户
发布于 2018-11-19 17:06:17
仅仅将display属性更改为block对我来说不起作用。我删除了li的填充，并为a设置了相同的填充。
li a {
display:block;
padding: 4px 8px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3264370
复制相关文章
相似问题
腾讯云开发者
