フレックスアイテムが折り返されたときにリストアイテムの箇条書きが重ならないようにする

Question

複数の列を持つ2つの行として表示したいリスト項目の順序付けられていないリストがあります。

問題は、各リストアイテムの箇条書きが前のリストアイテムと重なっていることです。

どうやってこれをやめるのですか？私はマージンを調整する面倒な解決策を見つけましたが、これに対してエレガントな修正があるかどうか疑問に思っていましたか？

私は弾丸を保持したいと思います。 リストアイテム内のテキストを箇条書きで囲む必要はありません。

私は現在、このようにそれをやっている：

body > ul { 
 
    background: #aaa; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
body > ul > li { 
 
    flex-grow: 1; 
 
    width: 33%; 
 
    height: 100px; 
 
} 
 
body > ul > li:nth-child(even) { 
 
    background: #23a; 
 
} 
 
body > ul > li:nth-child(odd) { 
 
    background: #49b; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

http://jsfiddle.net/L4L67/55/

Answer 1

body > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #aaa; 
 
    columns:3; 
 
    column-gap:0; 
 
} 
 
body > ul > li { 
 
    list-style: none; 
 
    height: 100px; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
</ul>

Answer 2

あなたはCSS list-style-positionプロパティを探しているかもしれません。

このプロパティを使用すると、マーカーがボックスの外側にあるのか、内側にあるのかを制御できます。

初期値はoutsideです。スペックから

：

12.5 Lists

list-style-position

outside

マーカーボックスは、主要ブロックボックスの外側です。

inside

マーカーボックスは、要素の内容の前に、任意 :before擬似要素の前に、 主要ブロックボックスの最初のインラインボックスとして配置されています。あなただけの弾丸を取り出し

* { box-sizing: border-box; }   /* NEW */ 
 

 
body > ul { 
 
    background: #aaa; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
body > ul > li { 
 
    flex-grow: 1; 
 
    width: 33%; 
 
    height: 100px; 
 
    list-style-position: inside;  /* NEW */ 
 
    text-indent: -1em;     /* NEW */ 
 
    padding-left: 1em;     /* NEW */ 
 

 
} 
 

 
body > ul > li:nth-child(even) { 
 
    background: aqua; 
 
} 
 

 
body > ul > li:nth-child(odd) { 
 
    background: lightgreen; 
 
}

<ul> 
 
    <li>text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li> 
 
    <li></li> 
 
    <li>text text text text text text text text text text text text text text</li> 
 
    <li>text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text</li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>