2列列表行CSS JS的高度相同答案

【问题标题】：Same height on 2 col list row CSS JS2列列表行CSS JS的高度相同
【发布时间】：2020-04-28 07:14:46
【问题描述】：

如何使用 col 列表创建具有相同高度的行？我正在开发一个 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; 
}

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

知道怎么做吗？谢谢！

【问题讨论】：

请也发布您的 HTML
您的代码按原样工作：jsfiddle.net/5n4car6t（虽然我会删除浮动）
@Pete Flexbox 忽略子元素中的浮动。如果他使用断点否定 flex，他/她可以离开它，如果没有，他/她应该删除浮动，以保持他的 CSS 语义正确。
@George 只是说没有必要-无论他们离开还是删除它都不会打扰-我知道 flex 的工作原理，无需对我大喊大叫-我上述评论的要点是他们的代码正在按照他们的意愿工作
@Bryan 我添加了 html 它是一个 ul li 列表

标签： javascript jquery html css flexbox

【解决方案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>

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

【讨论】：

我不能，这是一个cms菜单，它使用ul li结构
我看到您可能希望使用此信息更新您的问题以避免进一步混淆。