Question

寻找一些代码来将li项目包装在具有设定高度的div中。如果列表项不符合高度，它将溢出到右侧。还希望将它们对准该div的左侧，子弹点仍然可见。

如果能够控制＆＃34;空间，那么

也会很好。介于两者之间，所以它看起来不会被压扁。

我写了代码，我希望它显示出来，知道它不会。希望它有助于解释我的目标。

＆＃13;

<div>

<ul>
<li> 1</li>   (space)   <li> 4</li>   (space)   <li> 7</li>
<li> 2</li>   (space)   <li> 5</li>   (space)   <li> 8</li>
<li> 3</li>   (space)   <li> 6</li>   (space)   <li> 9</li>



</ul>

</div>

＆＃13;

Answer 1

您可以使用column-count。检查下面的代码段。
有关详细信息，您可以参考https://www.w3schools.com/css/css3_multiple_columns.asp

＆＃13;

ul {
    list-style: none;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}
ul li {
    display: block;
    padding: 10px 0;
}

＆＃13;

<ul>
  <li> 1</li>
  <li> 2</li>
  <li> 3</li>
  <li> 4</li>
  <li> 5</li>
  <li> 6</li>
  <li> 7</li>
  <li> 8</li>
  <li> 9</li>
</ul>

＆＃13;

列出要包装在div中的项目

1 个答案: