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>