1

下面创建一个类似结构的表。

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

http://jsfiddle.net/CaqCg/5/

.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;
}​
4

1 回答 1

1

添加overflow: hiddenul:http: //jsfiddle.net/CaqCg/6/

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


更新:也添加overflow: hiddenlis 中,因为它们也在崩溃:http: //jsfiddle.net/CaqCg/13/

于 2012-10-05T13:50:43.187 回答