列出具有相同高度的项目 [英] List items with same height

问题描述

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

I have created a fiddle: http://jsfiddle.net/pQZ8f/

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

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?

推荐答案

一种解决方法是放弃底部边距/填充。

One solution is to fart around with bottom margin / padding.

适用于IE7 +（甚至可能使用ie6，我没有安装它）

Works in IE7+ (might even work using ie6, I don't have it installed)

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

JSfiddle Demo

这篇关于列出具有相同高度的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！