Question

This question is like this: How to make an <a> 100% height of <li>?，但这次a元素需要垂直填充。在这里：https://jsfiddle.net/7j60xgbg/是小提琴。在height: 100%;上设置a不起作用，因为它会使其在列表下方延伸。

如何让这个小提琴中的所有a元素填充可用高度并保留其填充？

Answer 1

box-sizing : border-box是你的朋友：

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

更新了小提琴https://jsfiddle.net/7j60xgbg/3/

Answer 2

设置a { height: 100% }应该有效：

＆＃13;

ul {
    padding: 0;
    display: table;
    color: black;
    background-color: red;
    height: 1em;
}

li {
    display: table-cell;
    border: thin solid black;
    background-color: yellow;
    height: 100%;
}

a {
    height: 100%;
    display: block;
    background-color: green;
    color: black;
    padding: 0.5em 1em;
}

a:hover {
    background-color: orange;
}

＆＃13;

<ul>
    <li><a href="/">1st item</a></li>
    <li><a href="/">2nd item</a></li>
    <li><a href="/">Some veeeeeeeeeeeeery long menu item, with a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text.... a lot of text....</a></li>
    <li><a href="/">3rd</a></li>
</ul>

＆＃13;

Answer 3

在a添加display:inline-block;height:100%;vertical-algin:top or middile

的css中

a{
    display: inline-block;
    background-color: green;
    color: black;
    padding: 0.5em 1em;
    height:100%;
    vertical-align:middle;
}

Answer 4

嗯，我想你想要这样的东西：

https://jsfiddle.net/7j60xgbg/4/

li { 
  display: table 
}

a {
  display: table-cell; 
  vertical-align: middle
}

诀窍是为display: table设置<li>，为display: table-cell设置vertical-align: middle，但必须设置固定高度列表。

Answer 5

与您的代码相同，但将高度：100％添加到代码中。

ul {
    padding: 0;
    display: table;
    color: black;
    background-color: red;
    height: 1em;
}

li {
    display: table-cell;
    border: thin solid black;
    background-color: yellow;
    height: 100%;
}

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

a:hover {
    background-color: orange;
}

Answer 6

使用以下css将适合您。提供height:100%并将填充更改为padding: 0 1em;

a {
    background-color: green;
    color: black;
    display: block;
    height: 100%;
    padding: 0 1em;
}

检查Fiddle.

如何制作<a> with padding 100% height of </a> <li> <a>.table-cell?

6 个答案: