Html 如何让内容填充html中<div>标签内的空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5143555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make content fill space inside <div> tag in html?
提问by Rasto
I have div that has exact width (280px) and inside it there are 2 hyperlinks and one input text box. The hyperlinks take just a little space. I want the input text box to fill the remaing space in the div. How can I do that ?
我有一个具有精确宽度 (280px) 的 div，里面有 2 个超链接和一个输入文本框。超链接只占用一点空间。我希望输入文本框填充div. 我怎样才能做到这一点 ？
Html:
网址：
<div class="notificationArea">
<a>A</a> <a>B</a>
<input id="Text1" type="text" />
</div>
CSS:
CSS：
.notificationArea
{
width: 280px;
vertical-align: middle;
text-align:left;
}
Note: I can replace the outer divby something else (for example span) but I'm trying to avoid tables.
注意：我可以用div其他东西（例如span）替换外部，但我试图避免使用表格。
EDIT: All elements (both hyperlinks and input) should be on the same line.
编辑：所有元素（超链接和输入）都应该在同一行上。
EDIT 2:I want the same think to work when I replace both hyperlinks with images. That is I want a divof fixed width that contains 2 images (fixed size) and inputtextboxt that will fill the remainig space.
编辑 2：当我用图像替换两个超链接时，我希望同样的想法起作用。那就是我想要一个div包含 2 个图像（固定大小）和input文本框的固定宽度，它将填充剩余空间。
Http:
网址：
<div class="notificationArea">
<img src="someImage" />
<img src="someImage2" />
<input id="Text1" type="text" />
</div>
CSS:
CSS：
.notificationArea
{
border-style: solid;
width: 330px;
}
.notificationArea input
{
width: 100%;
}
What I got is:
我得到的是：
But what I wantis:
但我想要的是：
So I don't want the input box to wrap. The solution on the picture uses tables that I'd like to avoid if possible.
所以我不希望输入框换行。图片上的解决方案使用了我希望尽可能避免使用的表格。
采纳答案by thirtydot
I know you said:
我知道你说：
I'm trying to avoid tables.
我试图避免桌子。
But, they make this really easy, so here's a display: tablebased answer:
但是，他们让这一切变得非常简单，所以这是一个display: table基于答案的答案：
I can't think of a more eloquent way to do this without resorting to JavaScript.
如果不求助于 JavaScript，我想不出更雄辩的方法来做到这一点。
CSS:
CSS：
.notificationArea
{
width: 280px;
vertical-align: middle;
text-align:left;
background: #ccc;
display: table
}
.notificationArea a, .notificationArea input {
display: table-cell
}
.notificationArea input {
width: 100%
}
HTML:
HTML：
<div class="notificationArea">
<a href="#">A</a> <a href="#">B</a>
<input id="Text1" type="text" />
</div>
回答by Halil ?zgür
You can give a's a specific width and remaining to the input:
你可以给a'a 一个特定的宽度和剩余的input：
CSS:
CSS：
.notificationArea
{
width: 280px;
vertical-align: middle;
text-align:left;
}
.notificationArea a {display: inline-block; width: 10%;}
.notificationArea input {display: inline-block; width: 75%;}/* 5% for white space */
You can take or give a few points to percentages.
您可以为百分比取或给几分。
回答by jenson-button-event
use a nowrap (white-space: nowrap ) on the div and force the textbox to be width=100%?
在 div 上使用 nowrap（空白： nowrap ）并强制文本框为 width=100%？
.notificationArea
{
width: 280px;
vertical-align: middle;
text-align:left;
white-space:nowrap;
}
input
{
width:100%;
}
回答by JAiro
You could put relatives values to the input for example width:100% and fix the height.
您可以将亲戚值放入输入中，例如 width:100% 并固定高度。
