html - 当我制作 ul list similar visual like table 时出现高度问题

Question

我有一组 ul 列表。这些列表看起来像我需要的 2 列表。我做到了。但是当任何列表内容增加时会出现问题。问题是不应用等高。所以它看起来像破 table 。

这是我的 Fiddle下面是片段

    ul.filter_list {
      margin: 0px;
      padding: 0px;
      width: 100%;
      display: table;
      border: 1px #000 solid;
    }
    li.filter_cell {
      display: table-cell;
      width: 50%;
      float: left;
      padding: 4px;
      border-collapse: collapse;
      border-top: 1px #000 solid;
      box-sizing: border-box;
    }
    ul.filter_list li:nth-child(odd) {
      border-right: 1px #000 solid;
    }
    .filtertab_title {
      font-family: 'open_sansbold';
      margin-top: 8px;
      margin-bottom: 5px;
      margin-left: 16px
    }
    .filtertab_value {
      margin-bottom: 10px;
      margin-left: 16px
    }

<ul class="filter_list">
  <li class="filter_cell">
    <div class="filtertab_title">PMT Base Name</div>
    <div class="filtertab_value">
      <select class="filtertab_select">
        <option>Any</option>
      </select>
    </div>
  </li>
  <li class="filter_cell">
    <div class="filtertab_title">Category</div>
    <div class="filtertab_value">
      <select class="filtertab_select">
        <option>Any</option>
      </select>
    </div>
  </li>
  <li class="filter_cell">
    <div class="filtertab_title">Pattern Category Name and documentation information for lorem text goes here dummy text</div>
    <div class="filtertab_value">
      <select class="filtertab_select">
        <option>Any</option>
      </select>
    </div>
  </li>
  <li class="filter_cell">
    <div class="filtertab_title">GMT Base Name</div>
    <div class="filtertab_value">
      <select class="filtertab_select">
        <option>Any</option>
      </select>
    </div>
  </li>
  <li class="filter_cell">
    <div class="filtertab_title">Measurement</div>
    <div class="filtertab_value">
      <select class="filtertab_select">
        <option>Any</option>
      </select>
    </div>
  </li>
  <li class="filter_cell">
    <div class="filtertab_title">Base Name</div>
    <div class="filtertab_value">
      <select class="filtertab_select">
        <option>Any</option>
      </select>
    </div>
  </li>

</ul>

Answer 1

改变结构

<div class="filter_divst">
<div class="filter-row"> <!--add this element to create a row for 2 columns-->
    <div class="filter_cell">
      <div class="filtertab_title">PMT Base Name</div>
      <div class="filtertab_value">
        <select class="filtertab_select">
          <option>Any</option>
        </select>
      </div>
    </div>
    <div class="filter_cell">
      <div class="filtertab_title">Category</div>
      <div class="filtertab_value">
        <select class="filtertab_select">
          <option>Any</option>
        </select>
      </div>
    </div>
  </div>
<div class="filter-row"> <!--add this element to create a row for 2 columns-->
    <div class="filter_cell">
      <div class="filtertab_title">Pattern Category Name and documentation information for lorem text goes here dummy text</div>
      <div class="filtertab_value">
        <select class="filtertab_select">
          <option>Any</option>
        </select>
      </div>
    </div>
    <div class="filter_cell">
      <div class="filtertab_title">GMT Base Name</div>
      <div class="filtertab_value">
        <select class="filtertab_select">
          <option>Any</option>
        </select>
      </div>
    </div>
</div>
<div class="filter-row"> <!--add this element to create a row for 2 columns-->
    <div class="filter_cell">
      <div class="filtertab_title">Measurement</div>
      <div class="filtertab_value">
        <select class="filtertab_select">
          <option>Any</option>
        </select>
      </div>
    </div>
  <div class="filter_cell">
    <div class="filtertab_title">Base Name</div>
    <div class="filtertab_value">
      <select class="filtertab_select">
        <option>Any</option>
      </select>
    </div>
  </div>
</div>
</div>



div.filter_list
{
    margin:0px; 
  padding:0px; 
  width:100%;
  border:1px #000 solid;/*add this */
}
.filter-row{ /*add this */
  width:100%;
  display:flex;
  -webkit-display:flex;
}
div.filter_cell
{
  width:50%; 
  padding:4px; 
  box-sizing:border-box;/*add this */
  border-collapse:collapse; 
  border-top:1px #000 solid;
  box-sizing:border-box;
  border-left: 1px #000 solid;
}