输入文本自动宽度填充100％与其他元素浮动 [英] Input text auto width filling 100% with other elements floating

问题描述

我有一个搜索框的以下布局：

 < div id =emulating_variable_width> 
< form id =srxFormmethod =post> 
< div id =qsrxSearchbar> 
< div id =scope>人名< / div> 
< input type =textid =theqtitle =Search> 
< button id =btnSearchtype =button>搜索< / button> 
< / div> 
< / form> 
< / div> 
  

p>

• 范围中的标题是长度可变的文本

我想要的是让输入文本元素填充所有可用空间（即黄色空间），同时保持搜索按钮在右边。

CSS的完整示例是一个小东西

这将是最简单的方法来完成解决方案在IE7 +，FF，Safari等等工作...？

谢谢！ b $ b

解决方案

像这样？

DEMO： http://jsfiddle.net/v7YTT/19/

HTML：

 < div id =emulating_variable_width> 
< form id =srxFormmethod =post> 
< div id =qsrxSearchbar> 
< button id =btnSearch>搜索< / button> 
< label id =scope>人名< / label> 
< span>< input type =textid =theqtitle =Search/>< / span> 
< / div> 
< / form> 
< / div> 
  

CSS：

  #qsrxSearchbar 
 {
 width：500px; 
 height：100px; 
 overflow：hidden; 
 background-color：yellow; 
} 
 
 #qsrxSearchbar输入
 {
 width：100％
} 
 
 #qsrxSearchbar label 
 { 
 float：left 
} 
 
 #qsrxSearchbar span 
 {
 display：block; 
 overflow：hidden; 
 padding：0 5px 
} 
 
 #qsrxSearchbar按钮
 {
 float：right 
} 
 
＃ qsrxSearchbar输入，.formLine按钮
 {
 -moz-box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
 box-sizing：border-box 
} 
  

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... ?

Thanks!

解决方案

Like this?

DEMO: http://jsfiddle.net/v7YTT/19/

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:

#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
}

​

这篇关于输入文本自动宽度填充100％与其他元素浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！