텍스트 입력 상자가 버튼 옆에 남아있는 모든 공간을 오른쪽으로 가져가는 방법?

나는 여기서 내가 만들려는 것을 성취 할 수있는 CSS를 생각해 낼 수 없어서 여기 테이블에 의지하고 싶다.텍스트 입력 상자가 버튼 옆에 남아있는 모든 공간을 오른쪽으로 가져가는 방법?

텍스트 입력 상자 (<input type='text' />)
(<input type='button' />)

내가 원하는 버튼 버튼 오른쪽 정렬 (I :

나는 두 가지를 포함하는 <div> 용기를 가지고 고정 폭을주지 않았지만 쉽게 할 수 있었다). 텍스트 입력 상자는 버튼의 바로 왼쪽에 있어야하고 나머지 공간을 차지해야합니다. 다음의 예는 내가 무엇을 찾고 있어요 : 다음 HTML이이 (인라인 스타일을 사면 - 데모 용으로 만) 달성되지 불행하게도

enter image description here

<input type="button" value="Test" style="float: right;" /> 
<input type="text" style="display: block; width: 100%;" />

내가 tried adding a <div> wrapper,하지만 그 중 하나를 작동하지 않았다. 내가 도대체 뭘 잘못하고있는 겁니까? <table> 레이아웃으로이 작업을 쉽게 수행 할 수 있지만 뭔가를 놓치고 있어야하며 더 좋은 방법이 있다는 것을 확신합니다.

출처

2011-10-09 Nathan Osman

<table> 없이는 가능하지만 그다지 명확하지 않습니다.

참조 :이 작품http://jsfiddle.net/thirtydot/wE7jc/2/

<input type="button" value="Test" style="float: right;" /> 
<div style="overflow: hidden; padding-right: 8px"> 
    <input type="text" style="width: 100%;" /> 
</div>

이유는이 here을 설명했다.

출처

2011-10-09 04:56:33 thirtydot

'오버플로 : 숨겨진'에 관해서는 왜 그렇게 마법에 걸리나요? 그게 무엇이고 왜 필요한가? –

P. 답변 주셔서 감사합니다. 실제로 완벽하게 작동합니다. –

내 대답에 (두 번째) 링크가 보입니까? 나는 처음 몇 분 후에 그것을 추가했고, 이것이 잘 작동하는 이유를 설명했다. – thirtydot

은 당신이 고정 폭 버튼을 신경 쓰지 않는 한,이 수행해야합니다

http://jsfiddle.net/4WghJ/

은 기본적으로 버튼 만 보상하기 위해 오른쪽 여백과 사업부의 입력을 감쌌다.

출처

2011-10-09 04:59:38

텍스트 입력 상자가 버튼 옆에 남아있는 모든 공간을 오른쪽으로 가져가는 방법?

답변

관련 문제