液体文本框宽度 [英] Liquid textfield width
问题描述
我有这个相当简单的表格:
I have this fairly simple form:
<form action="...">
<div>
<input type="text" class="input-text" value="" name="text" />
<input type="submit" class="submit" value="Submit" />
</div>
</form>
表单位于固定宽度的div(以ems为单位)内.
The form is sitting inside a fixed-width div (specified in ems).
我希望文本字段和按钮为一行,但是即使我指定了size
属性,文本字段的宽度在浏览器中也是不一致的.不想指定确切的宽度(尤其是按钮的宽度)我想知道是否可以给文本字段一个液体宽度?我希望文本字段能够拉伸,以便它和按钮都可以放在一行中.
I want the textfield and button to be a single row, but the textfield width is inconsistent across browsers even when I specify its size
attribute. Not wanting to specify exact widths (especially for the button) I was wondering if it was possible to give the textfield a liquid width? I want the textfield to stretch so that both it and the button can fit on a single line.
推荐答案
是的length
用于字符计数,而不是宽度.
Yeah length
is for character count, not width.
您想让文本框填充所有可用空间,而不是按钮占用的空间?这对于表是可行的(但是我一直在为建议表使用Stack Overflow时感到嘘声).假设出于参数考虑,您将DIV与display:table一起使用,但为简单起见,我将使用实际的表标记进行说明.
You want the text box to fill all available space short of what the button takes up? This is doable with a table (but I consistently get booed on Stack Overflow for suggesting tables). Let's say for the sake of argument you use DIVs with display:table, but just for simplicity I'll illustrate with actual table markup.
<table cellpadding=0 cellspacing=0 width=100%>
<tr>
<td><input type="text" style="width:100%"></td>
<td style="width:0"><input type="submit"></td>
</tr>
</table>
按钮单元格上的宽度0可能看起来很奇怪,但表单元格仅将其宽度用作建议.无论您做得多么瘦,它都会拉伸以适合内容.
The width 0 on the button cell might seem odd, but table cells take their widths only as suggestions. It'll stretch to fit the content no matter how skinny you make it.
这篇关于液体文本框宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!