Html 列出具有相同高度的项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12324917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
List items with same height
提问by emphaticsunshine
I have created a fiddle: http://jsfiddle.net/pQZ8f/
我创建了一个小提琴：http: //jsfiddle.net/pQZ8f/
I want to have both the list items to be of same height without setting height manually. I want it to auto grow. I don't want to use javascript. Can it done be through css?
我想让两个列表项都具有相同的高度，而无需手动设置高度。我希望它自动增长。我不想使用 javascript。可以通过css完成吗？
采纳答案by Matthew
Ahh, yee old same height column problem.
啊，是的，旧的相同高度的列问题。
One solution is to fart around with bottom margin / padding.
一种解决方案是使用底部边距/填充放屁。
Works in IE7+ (might even work using ie6, I don't have it installed)
适用于 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;
}
回答by Frédéric Hamidi
It seems you're looking for a tabular layout, so maybe the best bet would be to use a <table>instead of floating <li>elements.
看来您正在寻找表格布局，所以最好的办法是使用 a<table>而不是浮动<li>元素。
That said, you can also specify tabular styles on your elements:
也就是说，您还可以在元素上指定表格样式：
ul {
display: table-row;
}
li {
width: 100px;
border: 1px solid black;
display: table-cell;
}
This should work on most modern browsers. You will find an updated fiddle here.
这应该适用于大多数现代浏览器。你会在这里找到一个更新的小提琴。
回答by Palash Karia
It's 2018, and we have display: flex, with 97.66% browser support (https://caniuse.com/#feat=flexbox)
现在是 2018 年，我们有 display: flex，浏览器支持 97.66% ( https://caniuse.com/#feat=flexbox)
With flexbox, all you need to do is:
使用 flexbox，您需要做的就是：
ul {
display: flex;
}
li{
width:100px;
border: 1px solid black;
}
Here's the fiddle: http://jsfiddle.net/pQZ8f/1076/
这是小提琴：http: //jsfiddle.net/pQZ8f/1076/
回答by Max
回答by Julia Trikoz
I use jquery.matchHeight.js library for this purpose. Adding class ="frame-height"to all lielements, make all lielements the same height as the highest lielement.
为此，我使用 jquery.matchHeight.js 库。为所有li元素添加class ="frame-height"，使所有li元素与最高的li元素高度相同。
回答by Furqan Freed
List is set as table and it will contain table properties. for list item when you set table-cell they will get table cell properties and by default all table cells will get same height.
列表设置为表格，它将包含表格属性。对于列表项，当您设置 table-cell 时，它们将获得表格单元格属性，并且默认情况下所有表格单元格都将获得相同的高度。
<!--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>
回答by XML
It depends on whyyou want them the same height: what overall effect are you trying to achieve?
这取决于您为什么希望它们具有相同的高度：您想要达到什么样的整体效果？
One option: If you're simply trying to match a background or something, you can put the background on the <ul>instead of the <li>'s and the <ul>will expand automatically to whatever the max height is of its child elements.
一种选择：如果您只是想匹配背景或其他东西，您可以将背景放在's<ul>而不是<li>'s 上，并且<ul>将自动扩展到其子元素的最大高度。
Further, if you're trying to make them the same height so you can align the bottomof the text, you can combine display: inline-blockinstead of float, and horizontal-align: bottom;. The result in this Fiddlegets you something that at least lookslike the <li>'s are the same height, but won't work for borders.
此外，如果您试图使它们具有相同的高度以便对齐文本的底部，则可以组合display: inline-block而不是float, 和horizontal-align: bottom;。在这样做的结果小提琴让你的东西，至少看起来像<li>的高度相同，但不会为边界的工作。
回答by Santosh Kadam
ul
{
display: table;
}
li
{
display:table-cell;
}
