列表项目在DIV

Question

寻找一些代码包包装了一套高度一个div锂项目。 当列表项不符合高度时，它会溢出到右侧。 也希望将它们对齐到该div的左侧，并且仍然可以看到子弹点。

也将是很好，如果你将能够控制之间，它看起来并不压扁的“空间”。

我写的代码如何我想它显示知道它不会。希望它有助于解释我后来的事情。

<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>

Answer 1

您可以使用column-count这一点。检查下面的代码片段...
查看详细你可以从https://www.w3schools.com/css/css3_multiple_columns.asp

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

<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>