Та же высота в строке списка 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, в который вы помещаете эту таблицу.