显示:表格和表格-单元

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%; }

但是在第三行，我的input元素并没有填满所有可用的空间：

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

如果有任何建议，我将不胜感激。

Answer 1

将剩余的百分比添加到您的CSS中，并将重要的百分比添加到您的ID中以覆盖：

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

这应该是可行的

Answer 2

实现目标的更聪明的方法是使用<label>标记而不是div标记，因为它提供了更好的表单元素流！

演示

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*/