我怎样才能把一个input元素作为其标签在同一行？

我想在同一行放置一个label和一个input[type=text] ，我希望input的宽度能够填充包含元素的剩余宽度，而不pipe标签文本的长度如何（参见第一图像）。

我试图使用width: auto; 为input ，但它似乎有一个静态宽度。 我也试过width: 100%; ，但将input移动到一个新行（请参阅第二个图像）。

我怎样才能实现这个使用CSS？

Answer 1

没有JavaScript，可以参考： http : //jsfiddle.net/Khmhk/

这适用于IE7 +和所有现代浏览器。

HTML：

 <label for="test">Label</label> <span><input name="test" id="test" type="text" /></span> 

CSS：

 label { float: left } span { display: block; overflow: hidden; padding: 0 4px 0 6px } input { width: 100% } 

overflow: hidden的原因overflow: hidden在这个例子中如此神奇的用处在这里解释 。

---

display: table-cell是另一种select，请参阅： http : //jsfiddle.net/Khmhk/1/

这适用于IE8 +和所有现代浏览器：

HTML：

 <div class="container"> <label for="test">Label</label> <span><input name="test" id="test" type="text" /></span> </div> 

CSS：

 .container { display: table; width: 100% } label { display: table-cell; width: 1px; white-space: nowrap } span { display: table-cell; padding: 0 0 0 5px } input { width: 100% } 

Answer 2

这仍然适用于我，但是这是Bootstrap 3如何做到这一点（感谢@ morten.c对“inline-form内的Bootstrap全angular文本input”的回答 ）。 不知道是否比@ thirtydot或者什么都难。 但在这里， 这里是一个小提示，它也给出了一个如何处理窄屏断点的基本例子。

HTML：

 <form class="responsive"> <input type="text" placeholder="wide input..."/> <span> <input type="submit"/> </span> </form> 

CSS：

 form.responsive, form.responsive * { box-sizing: border-box; width: 100%; height: 40px !important; /* specify a height */ } form.responsive { position: relative; display: table; border-collapse: separate; /* just to be safe */ border: 0; padding: 0; margin: 0; } form.responsive > input { position: relative; width: 100%; float:left; margin-bottom: 0; display: table-cell; } form.responsive span { position: relative; width: 1%; vertical-align: middle; display: table-cell; } form.responsive span input { margin: 0; margin-left: -1px; display: inline-block; vertical-align: middle; overflow: visible; }