拉伸<a>标记以填充整个<li>
这里有一个简单的菜单结构：
<ul id="menu"> <li><a href="javascript:;">Home</a></li> <li><a href="javascript:;">Test</a></li> </ul> 我想要<a>被拉伸，以便填充整个<li> 。 我尝试使用像width: 100%; height: 100% width: 100%; height: 100%但没有效果。 如何正确拉伸锚标签？
“a”标签是内嵌级别的元素。 没有内联级别元素可能会设置其宽度。 为什么？ 因为内联层次元素是为了表示stream畅的文本，理论上可以从一行到另一行。 在这种情况下，提供元素的宽度是没有意义的，因为你不一定知道它是否要包装。 为了设置它的宽度，你必须把它的显示属性改为block或inline-block ：
a.wide { display:block; } ... <ul id="menu"> <li><a class="wide" href="javascript:;">Home</a></li> <li><a class="wide" href="javascript:;">Test</a></li> </ul>
如果内存服务，您可以在IE6中的某些内联级别元素上设置宽度。 但那是因为IE6错误地实现了CSS，并且想混淆你。
只需使用display:block;设置A display:block; ：
ul#menu li a { display: block;}
display:flex
是HTML5的方式。
看小提琴
有用的黑客框架button，或任何其他元素，但您可能需要先删除其填充，并将其设置为所需的高度。
在这种情况下，angular度材料标签，这是一种棘手，使他们作为一个“标准”的网站导航。
注意，一旦你进入标签，指针就会改变：<a>现在被拉伸以适应它们的父维度。
除了话题之外，即使是在“大面积”，也要注意无瑕angular材料如何显示连锁效应。
.md-header{ /* THIS IS A CUSTOM HEIGHT */ height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */ } md-tab{ padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */ } a{ display: flex; align-items: center; justify-content: center; height: 100%; }
一种不同的方法：
<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可点击。
<!doctype html> <html> <head> <style type="text/css"> #wide li a { display:block; } </style> </head> <body> <ul id="menu"> <li><a href="javascript:;">Home</a></li> <li><a href="javascript:;">Test</a></li> </ul> </body> </html>
您应该尽量避免在每个标签上使用课程，以便您的内容易于维护。
我用这个代码来填充宽度和高度 100％
HTML
<ul> <li> <a>I need to fill 100% width and height!</a> </li> <ul>
CSS
li a { display: block; height: 100%; /* Missing from other answers */ }
使用line-height和text-indent代替li元素的填充，并使用display: block; 锚标签
我只想在标签视图下使用这个function，即在720px以下，所以在我做的媒体查询中：
@media(max-width:720px){ a{ display:block; width:100%; } }
如果你的<li> s必须有一个特定的高度，那么你的<a> s只能拉伸到<li>的宽度而不是高度了。 我解决这个问题的一种方法是使用CSS display:block并向我的<a> s添加填充，或者将<a> s围绕<a> s
<ul id="menu"> <a href="javascript:;"><li>Home</li></a> <a href="javascript:;"><li>Test</li></a> </ul>
