如何使文本输入框占据父块内的所有剩余宽度？

Question

如何实现以下目标:

?????????????????????parent?????????????????????
? label [text-box                   ] [button] ?
? paragraph                                    ?
????????????????????????????????????????????????

• label 与左边对齐
• button 与右边对齐
• text-box 占据父母内的所有剩余宽度
• paragraph在左边对齐,label也必须左对齐

二者label并button应服从作为最大尽可能别处定义字体属性.parent在窗口中居中对齐,当然,可以有任意宽度.

请指教.

Answer 1

更新 [2016年10月]:Flexbox版本......

form {
  display: flex;
}
form input[type="text"] {
  flex: 1;
}

<form>
  <label>Name</label>
  <input type="text" />
  <button>Submit</button>
</form>
<p>Lorem ipsum...</p>

原始答案[2011年4月]:无表格CSS版本(表行为)...

<div id="parent">
    <div id="inner">
        <label>Name</label>
        <span><input id="text" type="text" /></span>
        <input id="submit" type="button" value="Submit" />
    </div>
    <p>some paragraph text</p>
</div>

CSS ...

#inner {
    display: table;
    width: 100%;
}
label {
    display: table-cell;
}
span {
    display: table-cell;
    width: 100%;
    padding: 0px 10px;
}
#text {
    width: 100%;
}
#submit {
    display: table-cell;
}

演示:http://jsfiddle.net/wdm954/626B2/4/

Answer 2

我不喜欢第一个回答实际使用table-cell的"table-less"版本.也不是使用实际表格的第二个答案.也没有使用硬编码宽度的第三个答案.这是使用flex的解决方案.这是最简单的:

#parent {
  display: flex;
}
input {
  flex: 1;
}

<div id="parent">
  <label>Name</label>
  <input type="text" />
  <button>Button</button>
</div>
<div>paragraph</div>

Answer 3

使用表格.:DI知道人们往往讨厌桌子,但他们会在这种情况下工作......

<div id="parent">
    <table style="width:100%">
        <tr>
            <td>label</td>
            <td style="width:100%">
                <input type="text" style="width:100%">
            </td>
            <td>
                <button>clickme</button>
            </td>
        </tr>
    </table>
</div>