液体文本字段宽度
我有一个相当简单的表单：
<form action="...">
<div>
<input type="text" class="input-text" value="" name="text" />
<input type="submit" class="submit" value="Submit" />
</div>
</form>
该表单位于固定宽度的 div 内（以 em 指定）。
我希望文本字段和按钮成为单行，但即使我指定其 size 属性，文本字段宽度在浏览器之间也不一致。不想指定确切的宽度（特别是对于按钮）我想知道是否可以为文本字段提供液体宽度？我希望文本字段能够拉伸，以便它和按钮都可以放在一行上。
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>
The form is sitting inside a fixed-width div (specified in ems).
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
是的
length用于字符数，而不是宽度。您希望文本框填充按钮占用的所有可用空间吗？这对于表格来说是可行的（但我一直因为建议表格而在 Stack Overflow 上受到嘘声）。为了便于论证，假设您将 DIV 与 display:table 一起使用，但为了简单起见，我将使用实际的表标记进行说明。
按钮单元格上的宽度 0 可能看起来很奇怪，但表格单元格仅将其宽度作为建议。无论你把它做得有多薄，它都会拉伸以适应内容。
Yeah
lengthis for character count, not width.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.
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.
如果您保留默认的提交按钮样式，则其宽度将因浏览器而异。这也意味着您寻找的文本字段的宽度是一个变量。
没有优雅的方法来做到这一点，但你有以下选择：
If you keep the default submit button styles its width will vary from one browser to the next. This also means that the text field's width you seek is a variable.
There is no elegant way to do it, but you have the following options: