html - 如何使 <a> 的填充高度为 <li>.table-cell 的 100%？

Question

这道题是这样的:How to make an <a> 100% height of <li>? , 除了这次 a 元素需要垂直填充。这里:https://jsfiddle.net/7j60xgbg/是 fiddle 。在 a 上设置 height: 100%; 不起作用，因为它会延伸到列表下方。

如何使此 fiddle 中的所有 a 元素填充可用高度并保留其填充？

Answer 1

box-sizing : border-box 是你的 friend :

a {
    display: block;
    background-color: green;
    color: black;
    padding: 0.5em 1em;
    height: 100%;
    box-sizing: border-box;
}

更新 fiddle https://jsfiddle.net/7j60xgbg/3/