輸入框填滿可用空間？

Question

我想設置該字段的字段集的寬度，然後讓包裝器和輸入框流暢地佔用可用空間。

這是我在多大程度上對這裏一點幫助了：

.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％它橫跨延伸的整個方式，而不是包裝整個方式減去字段集的寬度。

這就是我想實現的流體寬度網站：

輸入框填滿可用空間？

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，嘗試調整大小結果幀，看看它是如何液！