입력 텍스트 자동 폭

Question

I가 함께 검색 창에 대한 다음 레이아웃 :

<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>​ 

(매우 많은 도시 위해 간략화)

• 제목 '범위'는 길이가 가변적 인 텍스트입니다.

내가 원하는 것은 유지하는 동안 사용 가능한 모든 공간 (예 : 노란색 공간)을 채울 입력 텍스트 요소를 갖는 것입니다. 오른쪽에있는 검색 버튼.

Full example with the CSS is in a fiddle

어느 등 IE7 +, FF, 사파리에서 작동하는 솔루션을 달성 할 수있는 가장 쉬운 방법이 될 것입니다 ...?

감사합니다.

Answer 1

이렇게하면 되나요?

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

HTML :

CSS

<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>​ 

:

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

Answer 2

이봐 당신은

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

라이브 데모이

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 등의 입력 필드에 초점 속성을 사용 할 수 http://jsfiddle.net/rohitazad/v7YTT/1/

Answer 3

다음과 같은 것이 필요합니다.

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