SPAN의 STYLE이 파이어폭스에서는 안먹히나요?
예를 들어..
<style type='text/css'>
.span1 {width:100}
</style>
<div>
<ul>
<li><span class=span1>제목</span><input name=1 type=text>
</ul>
</div>
IE에서는 제목의 부분의 WIDTH가 잘 적용되어서 INPUT과 간격을 벌려주는데
파폭에서는 SPAN의 스타일이 아예 안먹혀서 INPUT과 찰싹 붙어버리네요.
어떻게 해야하는지 아시는분 있으면 가르쳐 주시면 감사하겠습니다.
<style type='text/css'>
.span1 {width:100}
</style>
<div>
<ul>
<li><span class=span1>제목</span><input name=1 type=text>
</ul>
</div>
IE에서는 제목의 부분의 WIDTH가 잘 적용되어서 INPUT과 간격을 벌려주는데
파폭에서는 SPAN의 스타일이 아예 안먹혀서 INPUT과 찰싹 붙어버리네요.
어떻게 해야하는지 아시는분 있으면 가르쳐 주시면 감사하겠습니다.
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 11개
ie핵을 쓰시든지 아니면 크기값을 고려해서 padding값을 줘보세요ㅋ
.span1{padding-right:10px;}
그런데 PADDING으로 하면..
사이의 공간만 벌어지고 INPUT이 일자로 정렬이 안되거든요.
음.. 다른 방법을 찾아야 겠어요. 음..
input style="vertical-align:middle" 요렇게요~
http://tested.kr/css.jpg
span에 width값만 들어가줘도 저렇게 IE에서는 깔끔하게 나오는데
파폭에서보면 엉망.. ㅡ_ㅡa 으아아아0ㅏㄴ0ㅏㅂㅈ0ㄷㅇ
크기(width)를 지정하지 않도록 되어 있습니다(http://www.w3.org/TR/CSS1#width)
IE에서만 되는 거죠.
이게 그 역할을 하는 것이긴 합니다만.......
제가 아는 짧은 지식으로는 어떻게 해야되는지 모르겠네요~
굳이 span을 사용안해도 된다면
그냥 table을 사용하시는게 더 좋을거 같네요~^^;;
꼬~옥 써야 된다면 위치지정하는 복잡한 방법이 있을거 같지만요~ㅎ
불여시가 좀 예민합니다.
<style type='text/css'>
.span1{margin-top:5px;} //여긴 실수~~ㅋ 적용안되요~ㅎ
.uu{width:300px;}
.uu li{list-style:none; width:300px; height:25px; position:relative; border:1px solid green;}
.uu li input{position:absolute; right:0;}
</style>
<div>
<ul class="uu">
<li><span class="span1">제목</span><input name=1 type=text></li>
<li><span class="span1">제목제목</span><input name=1 type=text></li>
<li><span class="span1">제목제목제목제목</span><input name=1 type=text></li>
</ul>
</div>
수평정렬이 하기 힘들것 같긴 하지만요~ㅎ
그냥 위에 청춘불안정님이 작성하신 소스 추천요~ㅋ
청춘님과 뽁스님이 알려주신 팁으로 해결하겠습니다. (__) 감사합니다.