테스트 사이트 - 개발 중인 베타 버전입니다

로그인창 정렬문제 채택완료

쏘쏘TH 9년 전 조회 5,249


 

기본 아웃로그인창을 일렬로 붙게 정렬 하고 싶은데 css를 손봐야 한다고 하는데 css  어려워요 ..

그냥 500짜리 가로사이즈에 맞게 정렬하고 싶었던건데 안되더라고요 ㅠㅠㅠ

 

 

아웃로그인은 아래처럼 적용되어있고요 

 

</p><p><div id="ol_svc"></p><p><section id="ol_before" class="ol"></p><p>       <form name="foutlogin" action="<?php echo $outlogin_action_url ?>" onsubmit="return fhead_submit(this);" method="post" autocomplete="off"></p><p>    <fieldset></p><p>        <input type="hidden" name="url" value="<?php echo $outlogin_url ?>">        </p><p>        <label for="ol_id" id="ol_idlabel">ID<strong class="sound_only">필수</strong></label></p><p>        <input type="text" id="ol_id" name="mb_id" required class="required" maxlength="20">        </p><p>        <label for="ol_pw" id="ol_pwlabel">PW<strong class="sound_only">필수</strong></label></p><p>        <input type="password" name="mb_password" id="ol_pw" required class="required" maxlength="20"></p><p>        <input type="submit" id="ol_submit" value="로그인"> <input type="checkbox" name="auto_login" value="1" id="auto_login"></p><p>        <label for="auto_login" id="auto_login_label">자동</label></p><p> </p><p>        </p><p>    </p><p>            <a href="<?php echo G5_BBS_URL ?>/register.php"><b>가입</b></a></p><p>            <a href="<?php echo G5_BBS_URL ?>/password_lost.php" id="ol_password_lost">찾기</a></p><p>        </p><p>    </fieldset></p><p>    </form></p><p></section></div></p><p> </p><p> <span style="font-size: 14.6667px; line-height: 1.5;">

 

css는

 

</span></p><p>/* 아웃로그인 스킨 */</p><p>.ol {position:relative;padding:0 0 0 0px;border-bottom:1px solid #dde4e9} /* 로그인창 위치 */</p><p>.ol h2 {position:relative;padding:0 0 0px; margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}</p><p>.ol ul {position:relative;padding:0 0 0px; margin:0;padding:0;list-style:none}</p><p> </p><p>.ol a.btn_admin {display:inline-block;padding:0 10px;height:15px;border:1px solid #e8180c;background:#e8180c;color:#fff;text-decoration:none;line-height:2.15em;vertical-align:middle} /* 관리자 전용 버튼 */</p><p>.ol a.btn_admin:focus, .ol a.btn_admin:hover {text-decoration:none}</p><p> </p><p>/* 로그인 전 */</p><p>#ol_before {}</p><p>#ol_before fieldset {position:relative}</p><p>#ol_id {display:block;margin:0 0 0 0px !important;margin:0 0 0px;padding:0 0 0 0px;width:80px;height:15px;border:1px solid #e4eaec;background:#f7f7f7;line-height:1.6em} /* 아이디 입력폼 위치*/</p><p>.ol_idlabel {position:absolute;top:0px;left:5px;color:#333;font-size:0.95em} /*아이디 안에 나오는문구 입력폼 위치*/</p><p> </p><p>#ol_pw {display:block;margin:0 0 0 0px !important;margin:0 0 0px;padding:0 0 0 0px;width:80px;height:15px;border:1px solid #e4eaec;background:#f7f7f7;line-height:1.6em}/* 패스워드 입력폼 위치*/</p><p>.ol_pwlabel {position:absolute;top:5px;left:35px;color:#333;font-size:0.95em}/*패스워드 안에 나오는문구 입력폼 위치*/</p><p> </p><p>#auto_login {}</p><p>#auto_login_label {letter-spacing:-0.1em}</p><p>#ol_submit {display:inline-block;width:40px;height:15px;border:0;background:#333;color:#fff;font-size:0.9em;font-weight:bold;vertical-align:top}</p><p>#ol_before a {letter-spacing:-0.15em}</p><p>#ol_svc {position:relative;padding:0 0 0 0px}</p><p>#ol_password_lost {display:inline-block;margin:0 0 0 5px}</p><p>#ol_auto {position:relative;float:right;margin:5px 0 0}</p><p>#ol_auto label {letter-spacing:-0.1em}</p><p>#ol_auto input {width:13px;height:13px;vertical-align:bottom}</p><p> <span style="font-size: 14.6667px; line-height: 1.5;">

이렇게 되어있어요 ㅠㅠ

어딜 손봐야 정렬이 될까요? ㅠㅠ

 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
9년 전

아래와 같이 해주세요.

<label for="ol_id" id="ol_idlabel">ID<strong class="sound_only">필수</strong></label>

<input type="text" id="ol_id" name="mb_id" required class="required" maxlength="20">       

<label for="ol_pw" id="ol_pwlabel">PW<strong class="sound_only">필수</strong></label>

<input type="password" name="mb_password" id="ol_pw" required class="required" maxlength="20">

ID

<input type="text" id="ol_id" name="mb_id" required class="required" maxlength="20">       

PW

<input type="password" name="mb_password" id="ol_pw" required class="required" maxlength="20">

로 변경해주세요.

또는 css 에서

.ol_idlabel {position:absolute;top:0px;left:5px;color:#333;font-size:0.95em} /*아이디 안에 나오는문구 입력폼 위치*/

.ol_pwlabel {position:absolute;top:5px;left:35px;color:#333;font-size:0.95em}/*패스워드 안에 나오는문구 입력폼 위치*/

의 top: 과 left: 의 값을 화면에 맞게 변경해주시면 됩니다.
 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

9년 전

실제 사이트를 보여 주시면, 고수분들이 답변 드리기가 더 쉬울 것 같습니다. ^^

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인