样式input元素填充其容器的剩余宽度

比方说，我有这样的html代码片段：

<div style="width:300px;"> <label for="MyInput">label text</label> <input type="text" id="MyInput" /> </div> 

这不是我的确切代码，但重要的是在固定宽度容器中的同一行上有一个标签和一个文本input。 我怎样才能input填充容器的剩余宽度，而不包装和不知道标签的大小？

Answer 1

就像每个人都讨厌表格布局一样，他们可以用这样的东西来帮助你，比如使用显式表格标签或者使用display：table-cell

 <div style="width:300px; display:table"> <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label> <input type="text" id="MyInput" style="display:table-cell; width:100%" /> </div> 

Answer 2

这里是一个简单而干净的解决scheme，不使用JavaScript或表格布局黑客。 它和这个答案类似： input文本自动填充100％，其他元素浮动

用一个display:block区域来display:blockinput区域是非常重要的。 接下来的事情是，button必须先来，input字段第二。

然后，您可以将button浮动到右侧，input字段填充剩余的空间。

HTML

 <form method="post"> <button>Search</button> <span><input type="text" title="Search" /></span> </form> 

CSS

 form { width: 500px; overflow: hidden; background-color: yellow; } input { width: 100%; } span { display: block; overflow: hidden; padding-right:10px; } button { float: right; } 

一个简单的小提琴： http : //jsfiddle.net/v7YTT/90/

更新1：如果您的网站只针对现代浏览器，我build议使用灵活的盒子 。 在这里你可以看到当前的支持 。

更新2：这甚至可以与多个button或与input字段共享完整的其他元素一起使用。 这是一个例子 。

Answer 3

我build议使用Flexbox：

一定要添加适当的供应商前缀！

 form { width: 400px; border: 1px solid black; display: flex; } input { flex: 2; } input, label { margin: 5px; } 

 <form method="post"> <label for="myInput">Sample label</label> <input type="text" id="myInput" placeholder="Sample Input"/> </form> 

Answer 4

最简单的方法是：

CSS：

 label{ float: left; } span { display: block; overflow: hidden; padding-right: 5px; padding-left: 10px; } span > input{ width: 100%; } 

HTML：

 <fieldset> <label>label</label><span><input type="text" /></span> <label>longer label</label><span><input type="text" /></span> </fieldset> 

看起来像： http : //jsfiddle.net/JwfRX/

Answer 5

请为此使用flexbox。 你有一个容器将它的孩子连成一排。 第一个孩子根据需要占用空间。 第二个弯曲采取所有剩余的空间：

 <div style="display:flex;flex-direction:row"> <label for="MyInput">label&nbsp;text</label> <input type="text" id="MyInput" style="flex:1" /> </div> 

Answer 6

非常简单的技巧是使用CSS calc公式。 所有的现代浏览器，IE9，广泛的移动浏览器应该支持这一点。

 <div style='white-space:nowrap'> <span style='display:inline-block;width:80px;font-weight:bold'> <label for='field1'>Field1</label> </span> <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' /> </div> 

Answer 7

你可以试试这个：

 div#panel { border:solid; width:500px; height:300px; } div#content { height:90%; background-color:#1ea8d1; /*light blue*/ } div#panel input { width:100%; height:10%; /*make input doesnt overflow inside div*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*make input doesnt overflow inside div*/ } 

 <div id="panel"> <div id="content"></div> <input type="text" placeholder="write here..."/> </div>