Question

以下内容创建了一个类似于结构的表。

正如您将在FIDDLE中看到的那样，第一个<li>的高度不计算在内。为什么会这样。

.ui .form {
    display:block; position:relative; clear:both;
}
.ui .padd {
    padding:20px; display:block;
}
.ui .form.boxstyle .text {
    padding:0 5px 10px 5px;
}
.ui .form.boxstyle ul {
    border:1px solid #DDD; border-radius:10px; background:#FAFAFA; margin:10px 0 10px 0; box-shadow:inset 0 0 10px rgba(100,100,100,0.1); display:block; position:relative; clear:both;
}
.ui .form.boxstyle li {
    border-bottom:1px solid #DDD; display:block; clear:both; position:relative;
}
.ui .form.boxstyle li span:first-child {
    float:left; display:block; width:-webkit-calc(35% - 20px);  width:-moz-calc(35% - 20px);  width:calc(35% - 20px); padding:12px 10px 9px 10px; font-size:12px; line-height:16px; height:16px; text-indent:6px; vertical-align:top;
}
.ui .form.boxstyle li span:nth-child(2) {
    float:right; display:block; width:-webkit-calc(65% - 34px); width:-moz-calc(65% - 34px); width:calc(65% - 34px); padding:11px 10px 9px 10px; font-size:12px; line-height:16px; min-height:16px; border:solid #DDD; border-width:0 1px 0 1px; background:#FFF;
}
.ui .form.boxstyle li:last-child {
    border-bottom:0px;
}
.ui .form.boxstyle label {
    width:100%; font-size:12px; color:#555; text-shadow:0 1px #FFF;
}
.ui .form.boxstyle input, .ui .form.boxstyle textarea {
    height:16px; display:block; color:#555; border:none; box-shadow:none; outline:none; line-height:16px; margin:0; width:100%; display:block; appearance:normal; padding:0;
}

Answer 1

将overflow: hidden添加到ul：http://jsfiddle.net/CaqCg/6/

由于其中的浮动元素，ul正在崩溃。

更新：overflow: hidden也加入了li，因为它们也在崩溃：http://jsfiddle.net/CaqCg/13/

CSS浮点元素首先缺少高度

1 个答案: