html - 在ul-＞ li-＞设计li中不会扩展高度以匹配标签高度

有人可以向我解释一下，为什么li和ul在plunkr波纹管中不膨胀？

我知道已经写了很多有关此的文章，但是我发现的只是玩弄溢出，高度，位置和显示CSS属性。我什么都不用。

<span style="color:#000000"><span style="background-color:#ffffff"><span style="background-color:#f6f8fa"><code>a {
        padding: 1em;
        background-color: red;
      }
      ul {
        list-style: none;
        background-color: yellow;
        display: flex; 
      }
      
      li {
        background-color: green;
        display: inline-block;
      }</code></span></span></span>

<span style="color:#000000"><span style="background-color:#ffffff"><span style="background-color:#f6f8fa"><code><!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></code></span></span></span>

最佳答案

有人可以向我解释为什么li和ul无法扩展

因为您的链接仍然是内联的，所以它们的填充从行框中流出。

为链接添加display: block。