ul { display: table-row; } li { width: 100px; border: 1px solid black; display: table-cell; } a { display: block; background-color: yellow; height: 100%; }
<ul> <li> <a href="#">Test</a> </li> <li> Test Test Test Test </li> </ul>
This answer解释了如何使< li>具有相同的高度,但现在如何使< a>填满其整个高度(不使用固定高度)?
您正在处理表,并且当计算表和表格单元格高度时,表高度值将用作最小值.
最简单的修复是为CSS表父区块提供一个高度值.
首先,对于ul,应用display:table而不是table-row,然后指定height:1px,任何非零值都可以工作.记住要清除边距和填充(由于ul默认设置).
确保CSS table-cell元素的高度为100%,然后a元素将占用高度(因为它显示为块).
注意:如果您将顶级高度设置为100%,这将在Chrome中运行,但在IE中失败.
ul { display: table; height: 1px; /* any small value will work */ margin: 0; padding: 0; } li { width: 100px; border: 1px solid black; display: table-cell; height: 100%; } a { display: block; background-color: yellow; height: 100%; }
<ul> <li> <a href="#">Test</a> </li> <li> Test Test Test Test </li> </ul>