html - 如何在一行中等高显示四个li标签？

Question

我有一个元素列表，它是动态从数据库中获取的，所以我对内容一无所知。我必须在一行中以相同的高度显示这四个里。我尝试了以下代码，但它不起作用。

我尝试将 display:flex 设置为 ul 但所有 li 标签都显示在一行中。我也尝试了 display: table 和 display: table-cell; 但同样的问题都显示在一行中。

body {
  margin: 0;
  padding: 0;
}

.List {
  max-width: 1140px;
  margin: auto;
}

.List ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.List ul li {
  width: 24%;
  padding: 20px;
  box-shadow: 1px 1px 12px 0px #EBE8E8;
  border-radius: 03px;
  background-color: #fff;
  margin: auto 07px 14px auto;
  display: inline-block;
}

<div class="List">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo sociis natoque
    </li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean </li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
    </li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo sociis natoque
    </li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean </li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo sociis natoque
    </li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
    </li>


  </ul>
</div>

My expected output is 


1  2  3  4
5  6

Answer 1

试试这个:

body {
  margin: 0;
  padding: 0;
}

.List {
  max-width: 1140px;
  margin: auto;
}

.List ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.List ul li {
  padding: 20px;
  box-shadow: 1px 1px 12px 0px #EBE8E8;
  border-radius: 03px;
  background-color: #fff;
  margin: 0 10px;
  flex: 1 0 19%;
  max-width: 19%;
}

codepen