HTML 입력 [type = text] 행의 나머지 공간을 차지합니다.

Question

IE7 +의 테이블을 사용하지 않고 을없이 성공적으로 처리하려고 시도했습니다.

실무하지만 그래서으로 바람직 코드 :

는

<table> 
    <tr> 
    <td><label for="address">Address</label></td> 
    <td><input type="text" name="address" value="" id="address" style="width: 100%;"/></td> 
    <td><a href="#">Find</a></td> 
    </tr> 
</table> 

이것이 할 것입니다 것은이있다 : [입력 텍스트] 그들은 수 있습니다 찾기 주소 한 줄 및 입력 필드에있는 모든의 100 %를 차지 레이블 또는 a를 다음 행으로 누르지 않고 사용 가능한 공간.

나는이 삶을 위해서 테이블이 없어도 작동 할 수 없다.

입력, 댓글, 링크를 높이 평가!

Answer 1

두 화면을 모두 같은 화면에 표시하는 this jsfiddle을 참조하십시오.

Answer 2

참조 :http://jsfiddle.net/thirtydot/PLsuG/

이 IE7 + 크고 모든 현대적인 브라우저에서 작동 좋은 솔루션입니다.

@ CyberDude의 두 번째 해결 방법과 매우 비슷합니다.

HTML :

<div class="formLine"> 
    <label for="address">Address</label> 
    <a href="#">Find</a> 
    <span><input type="text" name="address" id="address" value="" /></span> 
</div> 

CSS :

.formLine { 
    overflow: hidden; 
    background: #ccc 
} 
.formLine input { 
    width: 100% 
} 
.formLine label { 
    float: left 
} 
.formLine span { 
    display: block; 
    overflow: hidden; 
    padding: 0 5px 
} 
.formLine a { 
    float: right 
} 
.formLine input, .formLine a { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box 
}