HTML輸入控制最大可用寬度？

我在網頁上有一行。其中有三個控件HTML輸入控制最大可用寬度？

SomeText Input      Button 

It is like this 
<div> SomeText <Input/> <img> </div>

在上面IMG是浮動權

現在我有輸入尺寸30，但在小分辨率30是太大行和它分出兩個。

我希望輸入寬度是最大可用而不是固定寬度。

如果我嘗試大小= 100％，它需要整行開始完成推動文本和img上方和下方的新行。

我該如何格式化這一行？

來源

2009-10-21 mamu

在簡單情況下：

<div> 
    <label for="thing">SomeText</label> 
    <input type="text" id="thing" /> 
    <img /> 
</div> 

div label { float: left; width: 20%; } 
div input { width: 60%; }

這是假設SomeText將很好地融入你已經有了什麼寬度的20％。

但也許它不會。

如果你想要固定大小的元素（例如，每個8em）在兩側，並從輸入寬度中減去這些元素，那麼你需要說100% minus 16em。不幸的是CSS沒有這種表達式計算功能。您可以管理最好是通過添加包裝，使100%對應於你真正想要的：

<div> 
    <label for="thing">SomeText</label> 
    <img /> 
    <div> 
     <input type="text" id="thing" /> 
    </div> 
</div> 

div label { float: left; width: 8em; } 
div img { float: right; width: 8em; } 
div div { margin-left: 8em; margin-right: 8em; } 
div div input { width: 100%; }

這是一個有點難看，因爲你必須搗鼓花車標記順序（或使用絕對定位）。在這一點上，你可能會更好只是放棄，並使用一個表來獲得所需的寬度：

<table><tr> 
    <td class="label"><label for="thing">SomeText</label></td> 
    <td class="input"> <input type="text" id="thing" /></td> 
    <td class="img"> <img /></td> 
</tr></table> 

table { table-layout: fixed; width: 100%; } 
tabel .label, table .img { width: 8em; } 
table input { width: 100%; }

有點複雜液體佈局形式往往超出CSS定位的能力，需要從表中的幫助。

（無論哪種方式，輸入上的一些框大小也可以幫助排隊。）

來源

2009-10-21 01:14:48 bobince

HTML輸入控制最大可用寬度？

回答

相關問題