입력란에 오른쪽 버튼이있는 div의 사용 가능한 공간 남음

Question

입력란에 아무 너비도 지정하지 않고 div의 입력란에 오른쪽 입력란을두고 남은 사용 가능한 공간이 쉽고 우아합니다.

<div> 
    <input type="text"/> 
    <button>button</button> 
</div> 

그것은 쉬운 것 같다하지만 난 그것을 할 수있는 방법을 찾을 수 없습니다 ... 여기 jsfiddle

: 당신은 디스플레이 테이블/테이블 셀을 사용할 수 있습니다 http://jsfiddle.net/LLQQQ/

Answer 1

. 이것은 테이블 기반 레이아웃이 아니므로 사람들은 자신의 뚜껑을 뒤집지 않을 것입니다. div를 테이블로 표시하도록 설정 한 다음 직계 하위 선택 자 > *을 사용하여 모든 직계 하위를 셀로 작동하도록 설정합니다. 그런 다음 셀의 너비를 지정할 수 있으며 최대 너비를 차지하도록 최선을 다할 것입니다. 그렇지 않으면 축소 될 수 있기 때문에 스팬에 단추를 넣어야했습니다.

http://jsfiddle.net/LLQQQ/6/

<div> 
    <input type="text"/> 
    <span><button>button</button></span> 
</div> 

div { 
    border: 1px solid #000; 
    display: table; 
    width: 100%; 
} 

div > * { display: table-cell; } 

div > span { width: 1%; } 
div > input { width: 100%; }