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

显示：表格和表格单元格

2 个答案: