如何实现以下：
┌────────────────────parent────────────────────┐ │ label [text-Box ] [button] │ │ paragraph │ └──────────────────────────────────────────────┘
>标签向左对齐
>按钮向右对齐
>文本框占用父级中的所有剩余宽度
>段落与左对齐，必须与标签左对齐
标签和按钮都应该尽可能遵守在其他地方定义的字体属性。父窗口在窗口中居中对齐，当然，可以有任意宽度。
请指教。
解决方法
更新[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;
}
