如何使< a> 100％高度的< li> [英] How to make an <a> 100% height of <li>?

问题描述

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>

此回答说明如何使< li> 的同样的高度，但现在我怎么能使< a> 填充其 li 固定高度）？

This answer explains how to make <li>s the same height, but now how can I make an <a> fill the entire height of its li (without using a fixed height)?

推荐答案

您正在处理表，表高度值在计算表时用作最小值，

You are dealing with tables, and table height values are used as a minimal value when computing table and table-cell heights.

最简单的解决方法是为CSS表的父块提供一个高度值。
首先，对 ul ，应用 display：table 而不是table-row， code> height：1px 和任何非零值都可以工作。

The easiest fix is to provide a height value to the CSS table parent block. First, to the ul, apply display: table instead of table-row, and then specify height: 1px and any non-zero value will work. Remember to zero out margins and padding (due to the ul default settings).

请确保CSS table-cell元素具有 height：100（默认设置） ％，然后 a 元素将占据高度（因为它显示为块）。

Make sure that the CSS table-cell element has height: 100%, and then the a element will take on the height (since it is displayed as a block).

注意：如果您将顶级高度设置为100％，则此设置将在Chrome中正常工作，但在IE中失败。

Note: If you set the top level height to 100%, this will work in Chrome but fail in 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>

这篇关于如何使< a> 100％高度的< li>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！