로그인화면 레이아웃이..
본문
안녕하세요
오늘도 인사드려요..!
.login_contents{
margin: 0 10px 0;
background-color:#ebebeb;
}
.login_wrap{
padding:5px;
height:250px;
}
.login_left input{
display:block;
width:150px;
-webkit-width:140px;
-ms-width:120px;
margin:5px;
}
.login_right input{
margin:5px;
padding:10px;
}
.login_bottom input{
margin:5px;
}
.login_start h4{
margin:10px 0 10px 5px;
}
.login_form .login_left{float:left; }
.login_form .login_right{float:left;}
.ad_contents{
margin:10px;
}
.login_bottom figure{
float:left;
}
.login_bottom img{
padding:5px;
}
.login_bottom input{
width:200px;
}
.login_bottom span{
float:left;
}
.login_bottom span button{
margin:2px;
padding:10px 10px;
}
.login_end{
margin:10px 0 10px 5px;
}
html
<div class="login_contents">
<div class="login_wrap">
<div class="login_start"><h4>LOGIN</h4></div>
<div class="login_form">
<form action="">
<div class="login_top">
<div class="login_left">
<input type="text" name="id" id="id" placeholder="아이디" />
<input type="password" name="password" id="password" placeholder="비밀번호" />
</div>
<div class="login_right">
<input class="#" type="submit" value="로그인" />
</div>
</div>
<div class="login_bottom">
<figure><img src="../../main/images/bb.png" alt="" /></figure>
<div class="vertical_button">
<span><button></button></span>
<span ><button></button></span>
</div>
<input type="textarea" placeholder="보안문자입력" />
</div>
</form>
</div>
<div class="login_end"><span><a href="../../admin/login/login.html">회원가입</a></span> / <span><a href="../../admin/sub/sub.html">비밀번호찾기</a></span></div>
</div>
하다하다 도저히 안잡혀서 로그인폼같이 저런 다닥다닥 붙은게 어떻게하면 레이아웃을 잡을수있을까요
특히 크롬과 익스에서 전혀 다르게 나오는 문제때문에 위의 코드는 사용을할수가 없었습니다;;
어제부터 2일동안 크로스브라우징과 여러가지 display들을 써봣으나 제머리로는 이쁜형태가 잡히지가안네요 방법이없을까요 ㅠ
