输入框填满可用空间？

Question

我想设置此字段的 fieldset 的宽度，然后让包装器和输入框流畅以占用可用空间。

这是我在这方面得到了多少帮助：

.lft { float: left; }
ul, li { list-style-type: none; vertical-align:middle; }
.ts3 { font-size: 15px; }
.dc3 { background-color: #808080; }
.tc5 { color: #333333; }
.p4 { padding: 4px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}
.fieldwrapper{display:inline-block; width:100%}
label{width:300px; display:inline-block; }

<ul>
    <li>
<div class="r6 dc3 ts2 p4">
<label field_id="None" for="sender">Sender email address</label>
<div class="fieldwrapper">
<input class="field" placeholder="Email" type="text" value="">
</div>
</div>
</li></ul>

当我将包装器设置为100％时，它会向整个方向延伸，而不是整个方向减去 fieldset 的宽度。

这就是我想要的流体宽度网站：

输入框是否填满了可用空间？

Answer 1

添加

input.field{width:100%}
.fieldwrapper{display:inline-block; width:70%}
label{width:25%; display:inline-block; }​

您可以相应地调整标签的宽度和输入。

演示http://jsfiddle.net/cskQ8/38/

---

新更新

input.field{width:100%}
.fieldwrapper{ padding: 0 5px 0 0;
    overflow: hidden;}
label{width:200px; display:inline-block; float:left}​

检查更新的演示here

Answer 2

是的，当然你已经将按钮从文档流中取出来了。您必须在容器上为输入（而不是fieldwrapper）设置正确的填充，以弥补其右侧的元素。

 .containingDiv{padding-right:75px;}
 .fieldwrapper{width:100%;}

Answer 3

如果您现在以更加语义的方式构建CSS和标记，未来您将非常感激。定义列表是一个合适的起点：

<dl class="form-container clearfix">
  <dt><label for="sender">Sender email address</label></dt>
  <dd><input placeholder="Email" type="text" value="" /></dd>
</dl>

和CSS（记得包含一个clearfix）：

.form-container { /*just whatever styles you had applied*/}

/*label container, fixed width*/
.form-container>dt {float:left; width:150px;}

/*input container, defaults to width:auto*/
.form-container>dd { margin-left:150px; }

/*box-sizing property is the best thing since sliced bread*/
.form-container input[type=text] {width:100%;box-sizing:border-box;padding:4px;}

Fiddled，尝试调整结果框架的大小，看看它有多流畅！