HTML - 브라우저

Question

크기를 조정할 때 나는 내가 가진 어디 검색 사업부를 갖고 싶어 폭이 마지막 자동 리사이즈와 버튼, 레이블 및 텍스트 상자를 필요 :
1) 버튼
2) 라벨
3) 텍스트 상자

내 목표 :
가 아래로 이동하지 않고, 기본 때마다 나는 물리적으로 브라우저 페이지의 크기를 조정하여 MAX WIDTH을의에 편집 상자가 자동으로 크기를 조정해야한다!

<div id="search">  
    <div id="searchbtn"> 
     <input id="btnSeach" type="button" value="Search" /> 
     Search: 
    </div> 
    <div id="searchtxt"> 
     <input id="txtSearch" name="txtSearch" type="text" value="" /> 
    </div> 
</div> 

을 CSS는 다음과 같습니다 :

나는 이것이 당신이 여기에 DIV을 사용하고 싶지만 무언가 경우에도 확실하지 않다

내가 시도 (실패) 한 것입니다

div#search 
{ 
    height: 30px; 
    border: 1px solid #80808D; 
    padding: 5px 0px 5px 0px; 
} 

div#searchbtn 
{ 
    float: left; 
    display: inline; 
    padding: 0px 10px 0px 10px; 
} 

div#searchtxt 
{ 
    float: left; 
    width: auto; 
    display: inline; 
    padding-right: 10px; 
} 

너비 : 자동은 자동 확장 (rsss)을 의미합니다.

TextBox에 90 % 너비를 넣으려고했으나 크기를 조정할 때 제대로 작동하지 않습니다.
div searchtxt에 약간의 너비를 두었으나 크기를 조정할 때 다시 제대로 작동하지 않았습니다.

각종 된 DIV에 대한 올바른 CSS 것, DIV 앞으로 방법입니다 무엇을 사용하는 경우?
이것이 아닌 경우 ... 다른 방법으로 더 잘 작동할까요?

감사합니다.

Answer 1

일부 display: 속임수를 사용하여 ...

<style type="text/css"> 
div#search { 
    border: 1px solid #80808D; 
    display: table; 
    height: 30px; 
    padding: 5px 0px 5px 0px; 
} 

div#searchbtn { 
    padding: 0px 10px 0px 10px; 
    white-space: nowrap; 
} 

div#searchtxt { 
    display: table-cell; 
    padding-right: 10px; 
    width: 100%; 
} 
input#txtSearch { 
    width: 100%; 
} 
</style> 

<div id="search"> 
    <div id="searchbtn"> 
     <input id="btnSeach" type="button" value="Search" /> 
     Search: 
    </div> 
    <div id="searchtxt"> 
     <input id="txtSearch" name="txtSearch" type="text" value="" /> 
    </div> 
</div> 

주 : 인터넷 익스플로러 8 (및 높은)은 "inline-table", "run-in"속성 값을 지원합니다."table-caption", "표 셀", "table-column", "table-column-group", "table-row", "table-row-group"및 " ! DOCTYPE이 지정된 경우에만 "상속"하십시오.

Answer 2

CSS를 사용하는 경우 왼쪽과 오른쪽이 채워져 확장 될 수 있습니다.

Answer 3

div에 min-width + % 을 추가하고 입력에 width:100%을 추가 했습니까?

Live Demo

(만 파이어 폭스 3.6.x에서 테스트)

http://jsfiddle.net/jordanlewis/HtevS/

Answer 4

좋아, 내가 같은 줄에 모든 것을 유지하는 것이 다른 방법을 발견했습니다

http://jsfiddle.net/jordanlewis/jtNEa/

HTML을

<div id="search"> 
    <input id="btnSeach" type="button" value="Search" /> 
    <label for="txtSearch">Search</label> 
    <input type="text" name="txtSearch" id="txtSearch" /> 

CSS

#search { 
    display:table; 
    width: 100%; 
} 

label { 
    padding-right:10px; 
} 

input { 
    display:table-cell; 
    width:95%; 
} 

label { 
    display:table-cell; 
    width:10px ; 
}