如何在html中的标签内填充内容？

概述我有一个具有精确宽度(280px)的div,其中有2个超链接和一个输入文本框.超链接只需要一点空间.我希望输入文本框填充div中的剩余空间.我怎样才能做到这一点 ？ HTML： <div class="notificationArea"> <a>A</a> <a>B</a> <input id="Text1" type="text" /></div> CSS： .notifica 我有一个具有精确宽度(280px)的div,其中有2个超链接和一个输入文本框.超链接只需要一点空间.我希望输入文本框填充div中的剩余空间.我怎样才能做到这一点 ？

HTML：

<div >    <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个图像(固定大小)和输入textBoxt,它们将填充keepig空间.

http：

<div >    <img src="someImage" />    <img src="someImage2" />    <input ID="Text1" type="text" /></div>

CSS：

.notificationArea{    border-style: solID;    wIDth: 330px;}.notificationArea input{    wIDth: 100%;}

我得到的是：

但我想要的是：

所以我不希望输入框包装.图片上的解决方案使用了我希望尽可能避免使用的表格.

解决方法 我知道你说过：

I’m trying to avoID tables.

但是,他们让这很容易,所以这里是一个显示：基于表格的答案：

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 >    <a href="#">A</a> <a href="#">B</a>    <input ID="Text1" type="text" /></div>

总结

以上是内存溢出为你收集整理的如何在html中的标签内填充内容？全部内容，希望文章能够帮你解决如何在html中的标签内填充内容？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。