Question

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

我知道很多人已经写过这个，但我发现的只是玩溢出，高度，位置和显示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>

Answer 1

有人可以向我解释，为什么li和ul不会扩展

因为您的链接仍然是内联的，因此他们的填充流出了行框。

为链接添加display: block。

Answer 2

在display:block中设置a，因为a是内联级别元素，因此将其设置为阻止级别

display:inline-block中也不需要li，因为display:flex中有ul

您还可以从padding

中删除默认ul

a {
  padding: 1em;
  background-color: red;
  display: block
}

ul {
  list-style: none;
  padding:0;
  background-color: yellow;
  display: flex;
}

<ul>
  <li>
    <a href="http://google.si">google</a>
  </li>
  <li>
    <a href="http://sometest.com">test item</a>
  </li>
</ul>

Answer 3

默认情况下，a是inline元素，因此它不会包含padding高度，只需将其更新为block标签元素即可。那么ul和li将耗费。要将其更新为block label，您可以添加display:block或display: inline-block或float: left。

Answer 4

只需添加display:block in anchor tag

即可

＆＃13;

      ul {
        list-style: none;
        background-color: yellow;
        display: flex; 
        margin:0px;
        padding:0px;
      }
      
     ul li {
        background-color: green;
        display: inline-block;
      }
      ul li a {
                padding: 1em;
        background-color: red;
        display:block;
      }

＆＃13;

<ul>
     <li>
       <a href="http://google.si">google</a>
     </li>
     <li>
       <a href="http://sometest.com">test item</a>
     </li>
   </ul>

＆＃13;

在ul - ＆gt; li - ＆gt;设计li不会扩展高度以匹配标签高度

4 个答案: