一个列表中的所有Li应该与最高项目具有相同的高度

Question

我有一个包含三个项目（li's）的列表。我希望该列表中剩余的两个li与该列表中的最高项具有相同的高度。我怎么能用CSS做到这一点？

示例：http://codepen.io/seraphzz/pen/EJFpd

谢谢！

Answer 1

Use display: table-cell to get table like layouts：

.box-page-ul {
  border-collapse: separate;
  margin-bottom: 20px;
}
.box-page-ul li {
  background-color: #60615c;
  padding: 20px;
  border: 10px solid white;
  width: 294px; 
  display: table-cell;
}

您有一些限制，您不能再使用边距来分隔li元素，而且它们也不会像使用float一样流向多行。如果你需要那些，那么你将不得不求助于JavaScript，或者等到CSS Flexbox成熟。

Answer 2

使用：

display: table-cell;

此处纠正您的更正代码http://jsfiddle.net/rwxdp/