ul table with li table-cell

Question

我想使用display: table和display: table-cell在两列（以及我的代码中的两行）中显示内容。

HTML code：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

和CSS：

ul {
  list-style-type: none;
  width: 100%;
  display: table;
  table-layout: fixed;
}
li {
  display: table-cell;
  width: 50%;
}

但我找不到任何答案为什么不起作用。我哪里错了？

JSFiddle ：https://jsfiddle.net/3Lwozhb9/

我需要相同的高度，display: inline-block没问题。

Answer 1

＆＃13;

＆＃13;

display:table

＆＃13;

* {
  box-sizing: border-box;
}
ul {
  list-style-type: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
li {
  flex: 0 0 50%;
  border: 1px solid grey;
  padding: 1em;
  display: flex;
  align-items: flex-end;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  width: 100%;
  display: table;
  table-layout: fixed;
}

li {
  display: table-cell;
  width: 50%;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
</ul>
<ul>
  <li>3</li>
  <li>4</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

两个相邻的列表项根据其内容

具有相同的高度