Html 输入文本自动宽度填充 100% 其他元素浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10244927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input text auto width filling 100% with other elements floating
提问by jmserra
i have the following layout for a search box with:
我有以下搜索框布局：
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<div id="scope"> Person Name </div>
<input type="text" id="theq" title="Search">
<button id="btnSearch" type="button">Search</button>
</div>
</form>
</div>?
(its very much simplified for showing purposes)
（为了展示目的，它非常简化）
- The title in the 'scope' is a text that can be variable in length
- “范围”中的标题是长度可变的文本
What i will like is to have the input text element to fill all available space (i.e. yellow space), while keeping the search button at the right.
我想要的是让输入文本元素填充所有可用空间（即黄色空间），同时将搜索按钮保持在右侧。
Full example with the CSS is in a fiddle
Which would be the easiest way to accomplish a solution working in IE7+,FF,Safari,etc... ?
在 IE7+、FF、Safari 等中完成解决方案的最简单方法是什么？
Thanks!
谢谢！
回答by mattytommo
Like this?
像这样？
DEMO: http://jsfiddle.net/v7YTT/19/
演示：http: //jsfiddle.net/v7YTT/19/
HTML:
HTML：
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<button id="btnSearch">Search</button>
<label id="scope"> Person Name </label>
<span><input type="text" id="theq" title="Search" /></span>
</div>
</form>
</div>?
CSS:
CSS：
#qsrxSearchbar
{
width: 500px;
height: 100px;
overflow: hidden;
background-color: yellow;
}
#qsrxSearchbar input
{
width: 100%
}
#qsrxSearchbar label
{
float: left
}
#qsrxSearchbar span
{
display: block;
overflow: hidden;
padding: 0 5px
}
#qsrxSearchbar button
{
float: right
}
#qsrxSearchbar input, .formLine button
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
?
?
回答by Rohit Azad
hey you can used focus properties in input field as like this
嘿，您可以像这样在输入字段中使用焦点属性
Css
css
#emulating_variable_width{
width:500px;
height:100px;
background-color:yellow;
}
input {
width:auto;
/*width:100%;*/
float:left;
width:100px;
font-size: 17px;
}
#scope{float:left;}
button{float:left;}
input:focus{
width:200px;
}
HTML
HTML
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<div id="scope"> Person Name </div>
<input type="text" id="theq" title="Search">
<button id="btnSearch" type="button">Search</button>
</div>
</form>
</div>
Live demo http://jsfiddle.net/rohitazad/v7YTT/1/
回答by Hardik Mishra
You need something like this:
你需要这样的东西：
#emulating_variable_width{
width:500px;
height:100px;
background-color:yellow;
}
input {
width:320px;
/*width:100%;*/
float:left;
font-size: 17px;
}
#scope{float:left;}
button{float:left;}
