使用css標籤和輸入佈局

我想排隊在同一行上的標籤和輸入框，使標籤佔用所有需要的空間，然後輸入框使用所有剩餘的空間。例如，如果容器爲1000像素，標籤爲342像素，則輸入寬度應爲658像素。但是，如果標籤更改爲100px，則輸入應調整爲900px。我可以使用表格佈局來做到這一點，或者在標籤寬度發生變化時使用JavaScript來調整輸入框的大小，但理想情況下我只想使用CSS來做到這一點。我的html看起來像這樣。使用css標籤和輸入佈局

<div id="container"> 
    <label for="inputBox">variable text</label> 
    <input type="text" id="inputBox" /> 
</div>

感謝，

編輯：爲了幫助說明什麼，我想在這裏做的是使用表的例子。

<table style="background-color:#ddd;width:500px;"> 
    <tr> 
    <td style="width:0;white-space:nowrap;"><label style="width:100%">text</label></td> 
    <td><input style="width:100%" type="text" /></td> 
    </tr> 
</table>

來源

2010-08-08 user414310

你想通過這schieve什麼？ – Nealv 2010-08-08 12:02:06

我試圖做到這一點來模擬命令行界面。標籤（提示）的長度根據用戶和主機而不同（例如someuser @ host：〜$或root @ host：〜＃），並且輸入應理想地填充該行上的任何空閒空間。 – user414310 2010-08-08 12:18:07

你想元素本身改變大小嗎？表格佈局不會爲你做到這一點。或者你想要的容器改變？ – Ray 2010-08-08 12:20:36

正確的方法是：

#container { width: 1000px; display: table } 
#container label { display: table-cell; white-space: nowrap; } 
#inputBox { width: 100%; display: table-cell; }

但不會在IE 6工作或7

來源

2010-08-08 12:38:37 SpliFF

謝謝，我正在尋找幸運的是，我不需要這個工作在IE6或IE7。 – user414310 2010-08-08 12:51:41

我最喜歡的一種項目 – SpliFF 2010-08-08 13:02:24

這個CSS應該工作：

#container { width: 1000px; white-space: nowrap; } 
#inputBox { width: 100%; }

當然你也可以調整容器的寬度，以滿足您的需求。

編輯：上面的CSS展開inputBox爲1000px，因此使div寬度比想要的更大。達到你想要，你可以使用overflow屬性爲http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/描述的效果，有點額外的標記：

<div id="container"> 
    <label for="inputBox">variable text</label> 
    <div><input type="text" id="inputBox" /></div> <!-- Notice the input is wrapped in an additional div --> 
</div>

的CSS：

#container { width: 1000px; white-space: nowrap; } 
#container label { float: left; margin-right: 5px; /* The label must be a floating element, the margin adds a little space to visually separate it from the input field */ } 
#container div { overflow: hidden; /* This does the trick */ } 
#inputBox { width: 100%; }

來源

2010-08-08 12:26:05

謝謝，這幾乎可行，唯一的問題是輸入框然後採取容器的確切大小（例如1000px）而不是剩餘的空間，如果您在輸入框中鍵入一個長字符串，導致容器水平溢出。 – user414310 2010-08-08 12:33:00

爲您添加了一個固定的例子，它適用於所有瀏覽器（在IE5.5,6,7,8，Opera 10.6，FF 3.6，Chrome 6和Safari 4中測試過）。 – 2010-08-08 19:22:08

#container { margin-left: 100px; position: relative; } 
#container label { position: absolute; left: -100px; } 
#container input { width: 100%; }

（可以使用box-sizing以及它的瀏覽器專用版本，以確保輸入的邊界在必要時很好地排列起來，如果您還需要在IE6-7中使用這些版本，則可以使用一堆填充黑客來容納額外的像素。）

這要求知道標籤的大小。它不能取決於label（即'收縮包裝'）的文本內容的寬度而沒有一堆額外的標記（這實際上不會比使用表格更好）。

當液體佈局形式比這更復雜時，通常需要轉到表格。傳統的CSS定位在分配固定，液體和收縮包裝內容之間的寬度方面並不是很好。

來源

2010-08-08 12:35:58 bobince

這幾乎是我想要的，不幸的是標籤需要更改寬度，如果使用固定寬度，會導致問題。儘管感謝您的幫助。 – user414310 2010-08-08 12:53:42

使用css標籤和輸入佈局

回答

相關問題