谁能给我解释一下，为什么 li 和 ul 没有在下面的 plunkr 中展开？
我知道有很多关于它的文章，但我发现的只是玩弄 overflow、height、position 和 display css 属性。我不使用任何这些。
a {
padding: 1em;
background-color: red;
}
ul {
list-style: none;
background-color: yellow;
display: flex;
}
li {
background-color: green;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<ul>
<li>
<a href="http://google.si">google</a>
</li>
<li>
<a href="http://sometest.com">test item</a>
</li>
</ul>
</body>
</html>最佳答案
Can someone please explain to me, why li and ul does not expand
因为您的链接仍然是内联的，因此它们的填充会流出行框。
为链接添加display: block。
关于html - 在 ul -> li -> 设计中 li 不会扩展高度以匹配标签高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44133477/