如何在html？</div>中的<div>标签内填充内容空间

Question

我有一个具有精确宽度（280px）的div，里面有2个超链接和一个输入文本框。超链接只需要一点空间。我希望输入文本框填充div中的剩余空间。我怎么能这样做？

HTML：

<div class="notificationArea">
    <a>A</a> <a>B</a>
    <input id="Text1" type="text" />
</div>

CSS：

.notificationArea
{
width: 280px;
vertical-align: middle;
text-align:left;
}

注意：我可以用其他内容替换外部div（例如span），但我试图避免使用表格。

---

编辑：所有元素（超链接和输入）应该在同一行。

---

编辑2：当我用图像替换这两个超链接时，我希望同样的思考工作。那就是我希望div的固定宽度包含2个图像（固定大小）和input文本文本，它们将填充剩余空间。

的Http：

<div class="notificationArea">
    <img src="someImage" />
    <img src="someImage2" />
    <input id="Text1" type="text" />
</div>

CSS：

.notificationArea
{
    border-style: solid;
    width: 330px;
}
.notificationArea input
{
    width: 100%;
}

我得到的是：

---

但我想要的是：

所以我不想让输入框换行。图片上的解决方案使用了我希望尽可能避免使用的表格。

Answer 1

我知道你说过：

  

我正试图避免使用表格。

但是，他们让这很容易，所以这里有一个基于display: table的答案：

Live Demo

如果不诉诸JavaScript，我无法想到一种更有说服力的方法。

<强> 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：

<div class="notificationArea">
    <a href="#">A</a> <a href="#">B</a>
    <input id="Text1" type="text" />
</div>

Answer 2

您可以为a提供特定的宽度并留给input：

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 */

您可以对百分比采取或给出几点。

Answer 3

在div上使用nowrap（white-space：nowrap）并强制文本框为width = 100％？

  .notificationArea
  {
    width: 280px;
    vertical-align: middle;
    text-align:left;
    white-space:nowrap;
  }
  input
  {
    width:100%;
  }

Answer 4

您可以将亲戚值添加到输入中，例如width：100％并固定高度。

Answer 5

这是一个相当古老的问题，在现代浏览器上实现此功能的最简单方法是将 display 属性设置为 flex。

例如在下图中，您可以使用 display 属性将 div 扩展到其他内容的全高。

display:flex;