html - 列出具有相同高度的项目

Question

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

我想让两个列表项的高度相同，而无需手动设置高度。我希望它自动增长。我不想使用 javascript。可以通过css完成吗？

Answer 1

看来您正在寻找表格布局，所以最好的选择可能是使用 a<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 年，我们有 display: flex，支持 97.66% 的浏览器 ( https://caniuse.com/#feat=flexbox )

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

ul {
  display: flex;
}

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

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

Answer 4

您可以在 LI 元素上使用： display: inline-table

li {
    width:100px;
    background: red;
    display: inline-table
}

这是JSFiddle

Answer 5

这取决于您为什么希望它们具有相同的高度：您要达到什么样的整体效果？

一种选择：如果您只是想匹配背景或其他东西，您可以将背景放在's 上<ul>而不是<li>'s 上，并且<ul>将自动扩展到其子元素的最大高度。

此外，如果您试图使它们具有相同的高度以便对齐文本的底部，则可以组合display: inline-block而不是float, 和horizontal-align: bottom;. 这个Fiddle中的结果让你得到的东西至少看起来像<li>'s 的高度相同，但不适用于边框。

Answer 6

ul 
{
  display: table;
}

li
{
  display:table-cell;   
} 

Answer 7

列表设置为表格，它将包含表格属性。对于列表项，当您设置表格单元格时，它们将获得表格单元格属性，默认情况下，所有表格单元格都将获得相同的高度。

<!--SCSS-->
.list {
     display: table;

    .list-item {
       display: table-cell;
    }
}



<!--html-->
<ul class="list">
    <li class="list-iteam">
        <h1>Heading</h1>
        <p>Details in text</p>
    </li>
    <li class="list-iteam">
        <h1>Heading 2</h1>
    </li>
    <li class="list-iteam">
        <h1>Heading 2</h1>
        <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text </p>
    </li> 
</ul>

Answer 8

为此，我使用 jquery.matchHeight.js 库。为所有li元素添加class ="frame-height"，使所有li元素与最高li元素的高度相同。