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

问题描述

如何达到以下目的：

 ┌───────── ──────────────────┐
│标签[text-box] [button]│
│段落│
└─────────────────────────────── 
  

• 向左对齐
对齐

• 按钮 c> text-box 占用父级中的所有剩余宽度


• 段落



两者标签和按钮应该尽可能遵守在其他地方定义的字体属性。 parent 在窗口中心对齐，自然可以有任意宽度。

请指教。 p>

解决方案

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

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

 < form> < label> Name< / label> < input type =text/> < button>提交< / button>< / form>< p> Lorem ipsum ...< / p>   
 
 
原始答案[2011年4月]：表格行为的无表格CSS版本... 
 < div id =parent> 
< div id =inner> 
< label>名称< / label> 
< span>< input id =texttype =text/>< / span> 
< input id =submittype =buttonvalue =Submit/> 
< / div> 
< p>一些段落文本< / 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; 
} 
  
演示： 
 
How do achieve the following:
┌────────────────────parent────────────────────┐
│ label [text-box                   ] [button] │
│ paragraph                                    │
└──────────────────────────────────────────────┘
label is aligned to the left
button is aligned to the right
text-box occupies all remaining width within parent
paragraph is aligned to the left, must be left-aligned with label too
Both label and button should obey font properties defined elsewhere as maximum as possible. parent is center-aligned within window, and, naturally, can have arbitrary width.
Please advise.
 解决方案 
Updated [Oct 2016]: Flexbox version...
form {
  display: flex;
}
form input[type="text"] {
  flex: 1;
}
<form>
  <label>Name</label>
  <input type="text" />
  <button>Submit</button>
</form>
<p>Lorem ipsum...</p>
Original answer [Apr 2011]: Table-less CSS version (of table behavior)...
<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;
}
Demo: http://jsfiddle.net/wdm954/626B2/4/
                        
这篇关于如何使文本输入框占用父块中的所有剩余宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！