Question

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

Answer 1

您似乎正在寻找表格布局，因此最好的选择是使用<table>代替浮动<li>元素。

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

ul {
    display: table-row;
}

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

这适用于大多数现代浏览器。你会发现一个更新的小提琴here。

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 Demo

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/

Answer 4

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

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

这里是JSFiddle

Answer 5

这取决于为什么你希望它们具有相同的高度：你想要实现的整体效果是什么？

一个选项：如果您只想尝试匹配背景或其他内容，则可以将背景放在<ul>上而不是<li>上，<ul>会展开自动到其子元素的最大高度。

此外，如果您尝试将它们设置为相同的高度，以便可以对齐文本的底部，则可以将display: inline-block组合而不是float，并且horizontal-align: bottom;。此Fiddle中的结果可以为您提供至少看起来的内容，例如<li>的高度相同，但不适用于边框。

Answer 6

我为此目的使用jquery.matchHeight.js库。将 class =＆＃34; frame-height＆＃34; 添加到所有 li 元素，使所有 li 元素与最高元素的高度相同< strong> li 元素。

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

ul 
{
  display: table;
}

li
{
  display:table-cell;   
}

列出具有相同高度的项目

8 个答案: