拉伸<a>标签以填充整个<li>

Question

这是一个简单的菜单结构:

<ul id="menu">
  <li><a href="javascript:;">Home</a></li>
  <li><a href="javascript:;">Test</a></li>
</ul>

我想让它<a>被拉伸,以便它填满整个<li>.我尝试使用类似width: 100%; height: 100%但没有效果的东西.如何正确拉伸锚标签？

Answer 1

"a"标记是内联级别元素.没有内联级别元素可以设置其宽度.为什么？因为内联级别元素旨在表示流动文本,理论上它可以从一行换行到下一行.在那些类型的情况下,提供元素的宽度是没有意义的,因为你不一定知道它是否会包装.要设置其宽度,必须将其display属性更改为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,并且想让你感到困惑.

Answer 2

只需用A表示A的样式display:block;:

ul#menu li a { display: block;}

Answer 3

display:flex

是HTML5的方式.

见小提琴

用于破解框架按钮或任何其他元素,但您可能需要先删除它们的填充,并将它们设置为所需的高度.

在这种情况下,角度材料选项卡,使它们作为"标准"网站导航工作是一种棘手的技巧.

请注意,只要您进入选项卡,指针就会更改:<a>现在已拉伸以适合其父级尺寸.

出于主题,请注意即使在"大表面"上,完美无瑕的角质材料也能显示出涟漪效应.

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

更新2018年

当在按钮元素上使用flex时,AngularJS Material会抛出(温和)警告,因此不要假设所有HTML元素/标记都可以display:flex正确处理,或者在浏览器中具有同类行为.

如果在特定浏览器中出现意外行为,请记得咨询flexbugs.