제 질문 글을 봐주셔서 감사합니다.
이전 문제는 해결이 되었는데요, 이렇게
이름
비밀번호
자기소개
우측에 있는 input, textarea를 왼쪽에 딱 맞게 정렬을 하고싶습니다.
전에 올린 게시글의 댓글을 보니 고정너비값을 주면 된다고 하셔서 시도를 해보았으나 제대로 되질 않습니다.
제가 시도한 방법은 <span style="position:absolute;width:170%;"> 예를 들어서 이렇게 해보았는데요,
고정너비 설정하는 방법을 정확히 모르겠습니다.
마진으로 시도를 해보았으나, 크롬 / 사파리 / 익스플로어 브라우저마다 각각 다른 모습을 보여 정렬이 되지 않습니다.
사파리에는 정렬이 되어 보였으나, 크롬과 익플에서는 더 삐뚤빼뚤 해보이는 현상이요 ..
<form>
<div class="put">
<span style="position:relative;width:10%;">이름</span>
<input type="text"/>
</div>
<div class="put">
<span style="position:absolute;left:300px; right:0;top:500px;bottom:0;">비밀번호</span>
<input type="password"/>
</div>
<div class="put">
<span style="float:left;position:relative;width:10%;">자기소개</span>
<textarea cols="80" rows="12"></textarea>
</div>
<input type="submit" value="가입하기"/>
</form>
body 부분이구요,
.put {margin-top:10px;}
.put input[type="text"]{/*margin-left:128px;*/border-radius:20px 20px 20px 20px;}
.put input[type="password"]{/*margin-left:100px;*/border-radius:20px 20px 20px 20px;}
.put textarea{/*margin-left:106px;*/border-radius:20px 20px 20px 20px;}
input[type="submit"]{width:63%;/*margin-left:160px;*/border-radius:20px 20px 20px 20px;}
input:focus{
background-color:orange;
}
.put>textarea:focus{
background-color:orange;
}
위에 스타일 부분입니다.
스타이 부분에 주석처리 해 놓으신것을 보면 마진으로 시도해보았지만, 잘 안됩니다....
* 예외 : 테이블 태그를 이용하면 안됩니다 .. 디브를 사용해서 해야합니다.
꼭 한번 봐주시고 이 문제가 해결이 되었으면 좋겠습니다 !
