列出具有相同高度的项目

Question

我创造了一个小提琴:http: //jsfiddle.net/pQZ8f/

我希望两个列表项都具有相同的高度,而无需手动设置高度.我希望它能自动增长.我不想使用javascript.可以通过CSS完成吗？

Answer 1

看起来你正在寻找表格布局,所以最好的选择可能是使用<table>而不是浮动<li>元素.

也就是说,您还可以在元素上指定表格样式:

ul {
    display: table-row;
}

li {
    width: 100px;
    border: 1px solid black;
    display: table-cell;
}

这适用于大多数现代浏览器.你会在这里找到一个更新的小提琴.

Answer 2

啊,是老同样的高柱问题.

一种解决方案是使用底部边距/填充物放屁.

适用于IE7 +(甚至可以使用ie6工作,我没有安装)

ul {
    overflow: hidden;
    border: 1px solid black;
    float: left;
}
li {
    float:left;
    width:100px;
    background: red;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
li + li {
    border-left: 1px solid black;
}

JSfiddle演示

Answer 3

现在是2018年，我们展示的是Flex，具有97.66％的浏览器支持（https://caniuse.com/#feat=flexbox）

使用flexbox，您所需要做的就是：

ul {
  display: flex;
}

li{
 width:100px;
 border: 1px solid black;   
}

这是小提琴：http : //jsfiddle.net/pQZ8f/1076/