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

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/