텍스트 상자에 컨테이너의 사용 가능한 공간을 모두 채우지 만 고정 된 버튼의 위치가 남아 있어야합니다.

Question

iframe 내부에서 볼 수있는 aspx 페이지를 만들고 있습니다. 페이지는 간단한 gridview의 존재하며 페이지 상단에있는 텍스트 상자와 버튼입니다. (검색 기능)

텍스트 상자와 버튼이 함께 사용 가능한 모든 너비를 채우도록 텍스트 상자의 오른쪽에 단추를 원합니다. 버튼의 너비는 고정되어 있습니다. 텍스트 상자에는 동적 너비 만 있습니다.

나는 이것을보고 있었지만이 CSS 문제에 대한 해결책을 찾지 못했습니다. 당신의 누군가가 내 문제를 해결하기 위해 사용해야하는 CSS가 무엇인지 알고 있습니까? 그래서 아래의 구성표처럼 보입니까?

[TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEXTBOX] [BUTTON] 
/----------------------------------------------\ 
|----------------------------------------------| 
|-----------------GRIDVIEW---------------------| 
|----------------------------------------------| 
|----------------------------------------------| 
|----------------------------------------------| 
\----------------------------------------------/ 

고맙습니다!

Answer 1

은 실제로 우아함을 찾지 못했지만 3 가지 옵션이 있습니다.

자바 스크립트로 텍스트 상자 너비를 설정하십시오.

textBox.width = textBox.Parent.width - button.width 

는

<div style="position:relative"> 
    <input type="button" style="float:right" value="search or what not" /> 
    <input type="text" style="width:100%; position:absolute; top:0px; z-index:-1 " /> 
    <br style="clear:both" /> 
</div> 

테이블

에게

<table width="100%"> 
    <tr><td> 
     <input type="text" style="width:100%" /> 
    </td><td width="100"> 
     <input type="button" value="search or what not" /> 
    </td></tr> 
</table>