ul table with li table-cell

Question

display: tableとdisplay: table-cellを使用して2列（私のコードで2行）の内容を表示したい。

HTMLコード：

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

とCSS：

ul { 
    list-style-type: none; 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
} 
li { 
    display: table-cell; 
    width: 50%; 
} 

が、私は動作しない理由を任意の答えを見つけることができません。どこが間違っていますか？

JSFiddle：display: inline-blockは問題ありませんとhttps://jsfiddle.net/3Lwozhb9/

私は、同じ高さを必要としています。

Answer 1

これらliの細胞がであるべきため、かなり明らかではないのですが、1つのオプションではなくdisplay:tableのをフレキシボックスを使用しています。

* { 
 
    box-sizing: border-box; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
li { 
 
    flex: 0 0 50%; 
 
    border: 1px solid grey; 
 
    padding: 1em; 
 
    display: flex; 
 
    align-items: flex-end; 
 
}

<ul> 
 
    <li>1.</li> 
 
    <li>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque similique optio modi harum quas quae, libero provident dignissimos laboriosam et, inventore voluptatibus veritatis quos? Magnam.</li> 
 
    <li>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, velit expedita? Rem eos nulla impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veniam, quidem. Nisi alias deserunt facilis unde repellendus praesentium esse in consequuntur, 
 
    dolores natus reprehenderit incidunt culpa, repellat fugiat est quis!</li> 
 
    <li>4.</li> 
 
</ul>

Answer 2

HTMLコード： https://jsfiddle.net/qyqdetck/

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

CSS：隣接リスト項目の

ul { 
    list-style-type: none; 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
} 
li { 
    display: table-cell; 
    width: 50%; 
} 

両方の内容に基づいて同じ高さ