[英]HTML input control maximum available width?
我在網頁上有一行。 它有三個控件
SomeText Input Button
It is like this
<div> SomeText <Input/> <img> </div>
在上面img是浮動的權利
現在我有輸入大小30,但在小分辨率30對於行太大,它分成兩個。
我希望輸入寬度最大可用而不是固定寬度。
如果我嘗試size = 100%,則需要整行開始完成推送文本並在新行上方和下方img。
我如何格式化這一行?
在簡單的情況下:
<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定位的功能,需要表格幫助。
(無論哪種方式,輸入上的一些盒子大小調整也可以幫助排列。)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.