css-float - 显示 : inline-block and 100% height to achieve 'floating'

Question

我有一个 <ul> <li>我需要使用 display: inline-block; .这是为了“ float ” li 所必需的，而最后一个元素是其父容器的 100% 宽并且可以有任意数量的 li( float 意味着 li 的数量是有限的，具体取决于它包含元素的宽度) .所以 <ul> 的总宽度将大于视口(viewport)的宽度。

这很好，除非我要求“ float ”元素为多行，并且我希望所有不是多行的元素都是 <ul> 的 100% 高度。 .

我可以通过设置 <ul> 的高度来实现我想要的效果在 JS 中，但这是我真的不想做的事情。

这是一个 JS fiddle 。 http://jsfiddle.net/d5WBv/3/

谁有解决办法。我不确定是 flexbox 还是 display: table;可以解决这个问题，但我似乎无法解决....

谢谢!

Answer 1

我猜，你的意思是 li 的高度应该相同？

如果是这样，您可以将它们显示为表格单元格:

ul {
    display: table;
    width: 100%;
}

li {
    vertical-align: top;
    display: table-cell;
    padding: 10px;
    margin: 0;
}

此外，检查 updated fiddle .