下面是一个简单的菜单结构:
<ul id="menu">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Test</a></li>
</ul>
我希望<a>
被拉伸,这样它就可以填满整个<li>
。我试着使用像width: 100%; height: 100%
这样的东西,但是没有效果。如何正确地拉伸锚点标记?
发布于 2010-07-16 19:48:30
只需使用display:block;
设置A的样式
ul#menu li a { display: block;}
发布于 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
可单击。
发布于 2018-11-19 17:06:17
仅仅将display属性更改为block对我来说不起作用。我删除了li的填充,并为a设置了相同的填充。
li a {
display:block;
padding: 4px 8px;
}
https://stackoverflow.com/questions/3264370
复制相似问题