[英]HTML input control maximum available width?
I have a row in a web page. 我在网页上有一行。 which has three controls 它有三个控件
SomeText Input Button
It is like this
<div> SomeText <Input/> <img> </div>
In above img is floating right 在上面img是浮动的权利
Right now i have Input size 30, but in small resolution 30 is too big for the row and it splits in two. 现在我有输入大小30,但在小分辨率30对于行太大,它分成两个。
I want input width to be maximum available instead of fixed width. 我希望输入宽度最大可用而不是固定宽度。
If i try size = 100% it takes whole row start to finish pushing text and img above and below in new row. 如果我尝试size = 100%,则需要整行开始完成推送文本并在新行上方和下方img。
How do i need to format this row? 我如何格式化这一行?
In the simple case: 在简单的情况下:
<div>
<label for="thing">SomeText</label>
<input type="text" id="thing" />
<img />
</div>
div label { float: left; width: 20%; }
div input { width: 60%; }
This is assuming that SomeText will fit nicely into 20% of whatever width you've got. 这假设SomeText可以很好地适应你所拥有的宽度的20%。
But maybe it won't. 但也许不会。
If you want to have fixed-size elements (eg. 8em
each) at the sides and subtract those from the width of the input, you'd need to say 100% minus 16em
. 如果你想在侧面有固定大小的元素(例如每个8em
)并从输入的宽度中减去那些元素,你需要说100% minus 16em
。 Unfortunately CSS has no such expression-calculating feature. 不幸的是,CSS没有这样的表达式计算功能。 The best you can manage is by adding wrappers to make 100%
correspond to what you really want: 您可以管理的最好方法是添加包装,使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%; }
It's a bit ugly as you have to fiddle the markup order for floats (or use absolute positioning). 它有点难看,因为你不得不为浮点数(或使用绝对定位)弄乱标记顺序。 At this point you may be better off just giving up and using a table to get the desired width: 此时,您可能最好放弃并使用表格来获得所需的宽度:
<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%; }
Somewhat-complex liquid-layout forms often exceed the capabilities of CSS Positioning and need help from tables. 有些复杂的液体布局形式通常超出了CSS定位的功能,需要表格帮助。
(Either way, a bit of box-sizing on the input can also help to line things up.) (无论哪种方式,输入上的一些盒子大小调整也可以帮助排列。)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.