在 2 列列表行 CSS JS 上具有相同的高度

Question

如何使用列列表创建相同高度的行？我正在制作一个wordpress菜单，这就是它现在的样子：

https://i.stack.imgur.com/VvEXa.png

这就是我需要的：

https://i.stack.imgur.com/NNOiW.png

我尝试这样做：

<ul>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li ><a href="#">Lorem Ipsum is simply dummy</a></li>
</ul>
ul{ 
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: hidden;
} 
ul li{
width: calc(100% / 2);
float: left;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; 
}

但它在所有列表项上都具有相同的高度，而不仅仅是在我需要的行中。

知道如何制作吗？谢谢！

Answer 1

为什么不简单地使用表格？ 这可能在这里更合适：

<div class="col-5">
<table class="table">
<tbody>
<tr>
<td>lorem ipsum is simply dummy</td>
<td>lorem ipsum is simply dummy</td>
</tr>
<tr>
<td>lorem ipsum is simply dummy</td>
<td>lorem ipsum is simply dummy</td>
</tr>
<tr>
<td style="width:50%;">lorem ipsum is simply dummy text of the printing and typesetting industry</td>
<td>lorem ipsum is simply dummy</td>
</tr>
<tr>
<td>lorem ipsum is simply dummy</td>
<td>lorem ipsum is simply dummy</td>
</tr>
<tr>
<td>lorem ipsum is simply dummy</td>
<td>lorem ipsum is simply dummy</td>
</tr>
</tbody>
</table>
</div>

免责声明：我倾向于在所有页面上使用 bootstrap，因为我喜欢 12 列布局。 不过，您不必使用Bootstrap来完成这项工作。只需定义放置此表的任何div 的宽度即可。