顯示：表格和表格單元格

Question

我要進行以下布局：

[___][_***______________________________________________]
[___][_***______________________________________________]
[___][_***______________________________________________]
[___][_***____________________________________][__][____]

沒有星星的元素具有固定的寬度，帶有星星的元素應填充所有剩余空間。

這是我想出的標記：

的HTML：

<div class="wrapper">
 <div class="label">text</div><input type="text" class="valueField"/>
 <div class="label">text</div><input type="text" class="valueField"/>
 <div class="label">text</div><input type="text" class="valueField"/><div class="label">text</div><input type="text" class="valueField" id="fixed_valueField"/>
</div>

CSS：

.wrapper { display:table; width:100%; }
.wrapper > * { display:table-cell; width:auto; }
.label { width:5%; }
#fixed_valueField { width:15%; }

但是在第三行，我的輸入元素沒有填充所有可用空間：

[___][_***______________________________________________]
[___][_***______________________________________________]
[___][_***______________________________________________]
[___][_***________________][__][____]

將不勝感激任何建議。

Answer 1

將剩余的百分比添加到CSS中，並將重要的百分比添加到您的ID中以覆蓋：

.valueField { width: 80%; }
#fixed_valueField { width: 15% !important; }

那應該工作

Answer 2

達到目標的更明智的方法是使用<label>標記而不是div標記，因為它可以更好地形成表單元素！

演示 JSFiddle

的HTML

 <div class="wrapper">
      <label for="">text<input type="text" class="valueField"/></label> <br >
      <label for="">text<input type="text" class="valueField"/></label> <br >
      <label for="">text<input type="text" class="valueField"/></label> <br >
      <label for="">text<input type="text" class="valueField"/></label> <br >
      <label for="">text<input type="text" class="valueField"/></label> <br >
      <label for="">text<input type="text" class="span6"/><input type="text" class="span2"/><input type="text" class="span2"/></label> <br >
</div>

的CSS

 label { width:100%;}
input {width:80%;margin-left:2%;border:1px solid #CCC}
.span6{width:45%} /*css for last row inputs*/
.span2{width:15%} /*css for last row inputs*/