[CSS] input type="image", "text" 세로 정렬
ie는 type="text" 와 type="images"가 가지는 영역을 다르게 랜더링한다.
div.box{border:1px solid #3366ff;}
input.style{border:1px solid #333;width:100px;height:20px;}
<div class="box">
<input type="text" class="style" /> <input type="image" src="./images/common/login_btn.gif" />
</div>
이 부분은 우리가 각 태그가 가지는 영역을 없애기 위해
CSS시작에 padding:0px;margin:0px;를 주고 시작하듯
input 에 vertical-align:top;을 주면 해결이 된다.
그 후에는 컨디셔널코멘트로 위치값을 조정하자.
Add
*input 을 float으로 띄우는 방법도 있음.
div.box{border:1px solid #3366ff;}
input.style{border:1px solid #333;width:100px;height:20px;}
<div class="box">
<input type="text" class="style" /> <input type="image" src="./images/common/login_btn.gif" />
</div>
이 부분은 우리가 각 태그가 가지는 영역을 없애기 위해
CSS시작에 padding:0px;margin:0px;를 주고 시작하듯
input 에 vertical-align:top;을 주면 해결이 된다.
그 후에는 컨디셔널코멘트로 위치값을 조정하자.
Add
*input 을 float으로 띄우는 방법도 있음.
댓글
댓글 쓰기