下面创建一个类似表的结构。
正如您将在 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;
}
最佳答案
将overflow: hidden 添加到ul: http://jsfiddle.net/CaqCg/6/
ul 正在折叠，因为其中有 float 元素。
更新:将 overflow: hidden 添加到 li 中，因为它们也在折叠:http://jsfiddle.net/CaqCg/13/
关于CSS float 元素缺少第一个高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12747667/