样式输入元素以填充其容器的剩余宽度

Question

假设我有一个像这样的html片段:

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

这不是我的确切代码,但重要的是在固定宽度容器中的同一行上有标签和文本输入.如何设置输入样式以填充容器的剩余宽度而不包装并且不知道标签的大小？

Answer 1

这是一个简单而干净的解决方案,不使用JavaScript或表布局黑客.它与此答案类似:输入文本自动宽度填充100%,其他元素浮动

用输出字段包装输入字段很重要display:block.接下来的事情是按钮必须先来,然后是输入字段.

然后,您可以将按钮浮动到右侧,输入字段填充剩余空间.

HTML

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

CSS

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

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

更新1:如果您的网站仅针对现代浏览器,我建议使用灵活的方框.在这里你可以看到当前的支持.

更新2:这甚至适用于多个按钮或与输入字段共享的其他元素.这是一个例子.

Answer 2

尽管每个人都讨厌表格的布局,他们确实帮助这样的东西,使用显式表格标签或使用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 3

我建议使用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

请使用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 5

实现这一目标的最简单方法是:

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