以下は、テーブルのような構造を作成します。
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;
}