如何在html中的<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个图像(固定大小)和inputtextboxt 的固定宽度,它将填充剩余空间.

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基础答案:

现场演示

如果不诉诸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>