如何获取文本输入框以填充剩余空间？ [英] How to get text input box to fill remaining space?
问题描述
我有一些像这样简单的HTML：
< div id =" container" style =" width：100％;">
< input type =" text" < input type =" button" style =" float：right;"
value ="点击此处...">
< / div>
我希望按钮保持正常大小并且右对齐，并且编辑框自动占用
的剩余宽度容器。
我怀疑我错过了一些明显的东西，但我怎么能用
CSS来做这件事？
提前致谢。
Hi, I have some simple HTML like this:
<div id="container" style="width:100%;">
<input type="text" <input type="button" style="float:right;"
value="Click here...">
</div>
I want the button to remain the normal size and be right-aligned, and
the edit box to automatically take up the remaining width of the
container.
I suspect I''m missing something obvious, but how can I do this with
CSS?
Thanks in advance.
推荐答案
Scripsit Mike Harrison：
Scripsit Mike Harrison:
我有一些像这样的简单HTML：
Hi, I have some simple HTML like this:
请发一个网址，而不是一段代码。
Please post a URL, not a snippet of code.
< div id =" container" style =" width：100％;">
< input type =" text" < input type =" button" style =" float：right;"
value =" click here ...">
< / div>
<div id="container" style="width:100%;">
<input type="text" <input type="button" style="float:right;"
value="Click here...">
</div>
"点击此处...是无能为力的。可能只是一个例子，但它是一个_bad_
的例子，人们实际上使用了这样的按钮文本，这些文本是无意义的，即没有任何线索。
按钮的含义和效果。
没有标签的文本输入字段也是无能为力的。
根本不明显文本字段和按钮如何相互关联
。如果他们这样做，为什么不使用< fieldsetwith描述性
< legend>？然后你有一个_different_样式问题，也许还有一个值得解决的问题。
此外，这样一个按钮通常是毫无意义的，因为<输入
type =" button"只能通过脚本工作（如果它可以工作），并且
在你的代码片段中没有任何脚本。
那么如何从一个好的和真实的例子开始，由提供URL的
提供？
"Click here..." is clueless. Just an example, maybe, but it''s a _bad_
example, and people actually use such button texts, which are
(literally) clueless, i.e. give no clue of the meaning and effect of the
button.
A text input field without a label is clueless, too.
It is not obvious at all how the text field and the button relate to
each other. If they do, why not use <fieldsetwith a descriptive
<legend>? Then you have a _different_ styling problem, and perhaps one
that is worth addressing.
Besides, such a button is normally quite pointless, since <input
type="button"only works (if it works at all) via scripting, and there
isn''t any scripting in your snippet.
So how about starting a from a good and real example, presented by
providing the URL?
我希望按钮保持正常大小并且右对齐，并且编辑框自动占用
容器的剩余宽度。
I want the button to remain the normal size and be right-aligned, and
the edit box to automatically take up the remaining width of the
container.
真的吗？即使画布宽10米？
CSS关闭后会发生什么？然后宽度将由浏览器设置
默认值，它们相当小（通常约为20个字符）。所以
也许你应该首先选择合适的尺寸=...值;这是一个不方便的猜测，但最好做出一个聪明的猜测
让浏览器默认。
Really? Even if the canvas is ten meters wide?
What happens when CSS is off? The width will be then set by browser
defaults, which are rather small (typically, about 20 characters). So
maybe you should first choose a suitable size="..." value; it''s
inconvenient guesswork, but it''s better to make an intelligent guess
that to let browsers default.
我怀疑我错过了一些明显的东西，
I suspect I''m missing something obvious,
我们显然错过了这个网址。
We obviously miss the URL.
但我怎么能用CSS做到这一点？
but how can I do this with CSS?
我们错过了this的定义包含。
首先，当按钮元素出现在文本输入
元素之后，它将出现在它下面，尽管是右对齐的。如果你想让它们在视觉上出现在同一行上，你需要在文本输入元素之前放置按钮元素
。
你实际上没有_any_尝试设置文本输入字段
宽度，在HTML或CSS中，在你的剪辑中。为
容器元素设置了100％宽度，对此它没有任何影响，因为默认的
渲染是使< divement尽可能宽。
似乎没有任何直接的CSS方式来实现你想要的东西
（除了使用IE不支持的与表相关的属性），
但它在HTML中是微不足道的，只有一个简单的CSS：
< table width =" 100％">
< tr>< td width =" 100％">< input type =" text" style =" width：100％">< / td>
< td>< input type =" button" value ="点击此处...">< / td>< / tr>
< / table>
但是，重点是什么？如果现场需要尽可能多的空间，为什么要在右边放一个按钮来浪费空间？为什么不
如果它可能需要很大的空间，它会成为一个textarea？
-
Jukka K. Korpela （Yucca）
http：//www.cs。 tut.fi/~jkorpela/
We miss the definition of what "this" consists of.
To begin with, when the button element appears after the text input
element, it will appear below it, though right-aligned. If you want them
to appear on the same line visually, you need to put the button element
before the text input element.
You haven''t actually made _any_ attempt to set the text input field
width, in HTML or in CSS, in your snipped. The 100% width is set for the
container element, for which it has no effect, since the default
rendering is to make a <divelement as wide as possible.
There does not seem to be any direct CSS way of achieving what you want
(except using table-related properties that are not supported by IE),
but it''s trivial in HTML, with one simple piece of CSS:
<table width="100%">
<tr><td width="100%"><input type="text" style="width:100%"></td>
<td><input type="button" value="Click here..."></td></tr>
</table>
However, what would be the point? If the field needs as much space as
possible, why waste space by putting a button on its right? And why not
make it a textarea if it may need a lot of space?
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Jukka K. Korpela写道：
Jukka K. Korpela wrote:
Scripsit Mike Harrison：
Scripsit Mike Harrison:
>我有一些像这样简单的HTML：
>Hi, I have some simple HTML like this:
请发布一个网址，而不是一段代码。
Please post a URL, not a snippet of code.
一个完全形成的页面的URL不需要询问如何做某事。他的说明性片段简短明了。我正在给你奖励
你自己的一个无能点。
One doesn''t need a URL of a fully formed page to ask how to do
something. His illustrative snippet is short and clear. I''m awarding you
one cluelessness point of your own.
>< div ID = QUOT;容器" style =" width：100％;">
< input type =" text" < input type =" button" style =" float：right;"
value ="点击此处...">
< / div>
><div id="container" style="width:100%;">
<input type="text" <input type="button" style="float:right;"
value="Click here...">
</div>
点击此处......是无能为力的。可能只是一个例子，但它是一个_bad_
的例子，人们实际上使用了这样的按钮文本，这些文本是无意义的，即没有任何线索。
按钮的含义和效果。
"Click here..." is clueless. Just an example, maybe, but it''s a _bad_
example, and people actually use such button texts, which are
(literally) clueless, i.e. give no clue of the meaning and effect of the
button.
Jukka的另一个无能为力的点，他不理解它的价值
完全可以作为通用和剥离的例子-down，并且
所需要的只是它足以说明要问的问题。
Another cluelessness point for Jukka, who doesn''t understand it''s
perfectly OK for an example to be generic and stripped-down, and that
all that''s required of it is that it be sufficiently illustrative for
the question being asked.
没有标签的文本输入字段也是无能为力的。
A text input field without a label is clueless, too.
Jukka的第三个无能点，对于谁来说，
OP几乎肯定打算在其中贴上标签真实的页面，但只是
并没有把它包含在这个例子里，而他的问题的目的并没有必要用于
。
A third cluelessness point for Jukka, to whom it doesn''t occur that the
OP almost certainly intends to have a label in the real page but just
didn''t bother included it in the example, where it wasn''t necessary for
the purposes of his question.
文本字段和按钮的相互关系并不明显。
。如果他们这样做，为什么不使用< fieldsetwith描述性
< legend>？然后你有一个_different_样式问题，也许还有一个值得解决的问题。
It is not obvious at all how the text field and the button relate to
each other. If they do, why not use <fieldsetwith a descriptive
<legend>? Then you have a _different_ styling problem, and perhaps one
that is worth addressing.
这是一个例子。他们在最终的
产品中的工作关系的清晰度在这里是无关紧要的，实际上甚至可能会减损
例子说明OP问题的能力。对于Jukka来说，第四个毫无头绪
点。
It''s an example. The clarity of their working relationship in the final
product is extraneous here and in fact might even detract from the
example''s ability to illustrate the OP''s question. A fourth cluelessness
point for Jukka.
此外，这样的按钮通常毫无意义，因为< input
type =" button"只能通过脚本工作（如果它可以工作），并且
在你的代码片段中没有任何脚本。
Besides, such a button is normally quite pointless, since <input
type="button"only works (if it works at all) via scripting, and there
isn''t any scripting in your snippet.
Cluelessness point number five。 Jukka仍然没有想到
的例子并不打算成为整个页面。
Cluelessness point number five. Jukka still hasn''t figured out that the
example isn''t intended to be the whole page.
那么如何开始一个好的和真实的例子，由提供URL的
提供？
So how about starting a from a good and real example, presented by
providing the URL?
可能是因为页面上没有任何其他内容可以与获得OP的答案有关技术问题。
Probably because there isn''t anything else on the page that would have
anything to do with getting an answer to the OP''s technical question.
>我希望按钮保持正常大小并且右对齐，并且
编辑框自动占用
容器的剩余宽度。
>I want the button to remain the normal size and be right-aligned, and
the edit box to automatically take up the remaining width of the
container.
真的吗？即使画布宽十米？
Really? Even if the canvas is ten meters wide?
如果特定画布上1em = 20cm，为什么不呢？无能点
数字六。
If 1em = 20cm on that particular canvas, why not? Cluelessness point
number six.
当CSS关闭时会发生什么？然后宽度将由浏览器设置
默认值，它们相当小（通常约为20个字符）。所以
也许你应该首先选择合适的尺寸=...值;这是一个不方便的猜测，但最好做出一个聪明的猜测
让浏览器默认。
What happens when CSS is off? The width will be then set by browser
defaults, which are rather small (typically, about 20 characters). So
maybe you should first choose a suitable size="..." value; it''s
inconvenient guesswork, but it''s better to make an intelligent guess
that to let browsers default.
哇，一个有用的点。
Wow, one helpfulness point.
>
>
>我怀疑我错过了一些明显的东西，
>I suspect I''m missing something obvious,
我们显然错过了这个网址。
We obviously miss the URL.
>但我怎么能用CSS做到这一点？
>but how can I do this with CSS?
我们错过了this的定义由组成。
We miss the definition of what "this" consists of.
注意力缺陷症是否起作用？即使你很容易忘记了b $ b代词的前因，你也可以随时回去重读。
Attention deficit disorder acting up? Even if you lose track of
pronominal antecedents that easily, you can always go back and reread.
首先，当按钮时元素出现在文本输入
元素后，它会出现在它下面，虽然右对齐。如果你想让它们在视觉上出现在同一行上，你需要在文本输入元素之前放置按钮元素
。
你实际上没有_any_尝试设置文本输入字段
宽度，在HTML或CSS中，在你的剪辑中。为
容器元素设置了100％宽度，对此它没有任何影响，因为默认的
渲染是使< divement尽可能宽。
似乎没有任何直接的CSS方式来实现你想要的东西
（除了使用IE不支持的与表相关的属性），
但它在HTML中是微不足道的，只有一个简单的CSS：
To begin with, when the button element appears after the text input
element, it will appear below it, though right-aligned. If you want them
to appear on the same line visually, you need to put the button element
before the text input element.
You haven''t actually made _any_ attempt to set the text input field
width, in HTML or in CSS, in your snipped. The 100% width is set for the
container element, for which it has no effect, since the default
rendering is to make a <divelement as wide as possible.
There does not seem to be any direct CSS way of achieving what you want
(except using table-related properties that are not supported by IE),
but it''s trivial in HTML, with one simple piece of CSS:
另外两个有用点，总数达到三个。
Two more helpfulness points, bringing the total to three.
< table width =" 100％">
< tr>< td width =" 100 ％">< input type =" text" style =" width：100％">< / td>
< td>< input type =" button" value ="点击此处...">< / td>< / tr>
< / table>
<table width="100%">
<tr><td width="100%"><input type="text" style="width:100%"></td>
<td><input type="button" value="Click here..."></td></tr>
</table>
你怎么敢提供一个例子，而不是把它构建成一个带URL的完全功能，无瑕疵的页面！真是个伪君子。对于
这个我要再给两个无能点了。
How dare you provide an example without building it into a fully
functional, cluelessness-free page with a URL! What a hypocrite. For
this I''m awarding two more cluelessness points.
>
然而，什么会重点是什么？如果现场需要尽可能多的空间，为什么要在右边放一个按钮来浪费空间？为什么不
如果它可能需要很大的空间，它会成为textarea？
>
However, what would be the point? If the field needs as much space as
possible, why waste space by putting a button on its right? And why not
make it a textarea if it may need a lot of space?
还有一个有用的点。最终记录：8个无能点，4个/ b $ b有用点。
帖子的最终无能/乐于助人（CH）商：200％。
One more helpfulness point. Final tally: 8 cluelessness points, 4
helpfulness points. Final cluelessness/helpfulness (CH) quotient for the
posting: 200%.
2008-06-29，Jukka K. Korpela< ; jk ****** @ cs.tut.fiwrote：
On 2008-06-29, Jukka K. Korpela <jk******@cs.tut.fiwrote:
Scripsit Mike Harrison：
Scripsit Mike Harrison:
[...]
[...]
>< div id =" container" style =" width：100％;">
< input type =" text" < input type =" button" style =" float：right;"
value ="点击此处...">
< / div>
><div id="container" style="width:100%;">
<input type="text" <input type="button" style="float:right;"
value="Click here...">
</div>
点击此处......是无能为力的。可能只是一个例子，但它是一个_bad_
的例子，人们实际上使用了这样的按钮文本，这些文本是无意义的，即没有任何线索。
按钮的含义和效果。
"Click here..." is clueless. Just an example, maybe, but it''s a _bad_
example, and people actually use such button texts, which are
(literally) clueless, i.e. give no clue of the meaning and effect of the
button.
我在某个地方读到了一个调查，显示人们最有可能点击的按钮/链接文本是
。 点击这里！导致点击次数最多
，因为用户的注意力持续时间为4秒，希望保持良好状态，并且倾向于遵守直接命令。
点击更多信息，阅读更多等等，至少点击了
，因为它们使整个事情看起来像是在努力工作。 />
[...]
I read somewhere about a survey of which button/link texts people were
most likely to click on. "Click here!" resulted in the most clicks
because users have an attention span of four seconds, wish to remain
clueless, and tend to just obey direct commands.
Things like "more information", "read more", etc. were clicked on the
least because they made the whole thing seem too much like hard work.
[...]
首先，当文本输入后出现按钮元素
元素，它会出现在它下面，虽然右对齐。如果你想让它们在视觉上出现在同一行上，你需要在文本输入元素之前放置按钮元素
。
To begin with, when the button element appears after the text input
element, it will appear below it, though right-aligned. If you want them
to appear on the same line visually, you need to put the button element
before the text input element.
是的，虽然这实际上是Firefox 2和IE共享的错误。它不需要
将浮动放在第一位。
Yes, although this is actually a bug shared by Firefox 2 and IE. It
shouldn''t be necessary to put the float first.
你实际上没有_any_尝试设置文本输入字段
宽度，在HTML或CSS中，在剪切中。为
容器元素设置了100％宽度，对此它没有任何影响，因为默认的
渲染是使< divement尽可能宽。
似乎没有任何直接的CSS方式来实现你想要的东西
（除了使用IE不支持的与表相关的属性），
但它在HTML中是微不足道的，只有一个简单的CSS：
You haven''t actually made _any_ attempt to set the text input field
width, in HTML or in CSS, in your snipped. The 100% width is set for the
container element, for which it has no effect, since the default
rendering is to make a <divelement as wide as possible.
There does not seem to be any direct CSS way of achieving what you want
(except using table-related properties that are not supported by IE),
but it''s trivial in HTML, with one simple piece of CSS:
有一种方法，通过输入文本在另一个区块
格式化上下文。
..foo
{
display：block ;
溢出：隐藏; / *使其成为BFC * /
}
输入[type =" text"] {width：100％; }
输入[type =" button"] {float：right; }
....
< input type =" button" value ="点击此处>
< span class =" foo">
< input type =" text">
< / span>
警告：规范说浏览器可以将.foo放在按钮下面，
而不是旁边，如果他们想要的话。
There is a way, by putting the text input in a different block
formatting context.
..foo
{
display: block;
overflow: hidden; /* to make it a BFC */
}
input[type="text"] { width: 100%; }
input[type="button"] { float: right; }
....
<input type="button" value="Click here">
<span class="foo">
<input type="text">
</span>
Caveat: the spec says browsers can just put .foo below the button,
rather than beside it, if they want.
这篇关于如何获取文本输入框以填充剩余空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
