1차메뉴 크기조절시 이상현상이 있어요.

1차메뉴 크기조절시 이상현상이 있어요.

QA

1차메뉴 크기조절시 이상현상이 있어요.

본문

안녕하세요 그누보드를 사용해서 사이트 제작연습을 하고 있습니다.

1차 메뉴인 gnb가 브라우저창 조절을 하면 이상하게 변경되는 현상이 있는데요!

제가 생각한것은 min, max? 이 두개값이 안정해져서 그런거 같지만 아무리 해도 안되서 

도움을 요청하고자 글을 남깁니다.

 

3543343348_1552999838.8096.png

이랬던 메뉴가

 

3543343348_1552999881.0732.png

이렇게 됩니다 ㅠㅠ

 

<-- index.php -->

<div class="nav">
    <nav id="gnb_test">
            <ul id="gnb_test_1dul">
                <li><a href=""> 새로운 가족이 생겼어요♡</a></li>
                <li><a href=""> 천국의 계단</a></li>
                <li><a href=""> 실종동물 찾기</a></li>    
                <li><a href=""> 병원 정보</a></li>    
            </ul>
</div>

<style>
li {float:left; list-style-type:none;display:inline-block;}
a {display:inline-block;}

</style>
</nav>

 

<\css/default.css>

#gnb_test{text-align:center;background:#fff;position:realtive;border-top:1px solid rgb(143, 140, 140);border-bottom:2px solid rgb(228, 225, 223);}
#gnb_test a{margin-left:30px;}
#gnb_test a:hover{color:red; background:#fff;}
#gnb_test li{padding:6.5px;}
#gnb_test h2{position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb_test .gnb_test_wrap{margin:0 auto;position:relative;text-align:center}
#gnb_test #gnb_test_1dul {display:inline-block;font-weight:600;font-size:1.083em;margin:10px 650px 10px;padding: 0 0 0;background:#fff;zoom:1;} /* 메인메뉴 위치조정 380px; mong */
#gnb_test ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_test .gnb_test_1dli{float:left;line-height:50px;padding:0 25px;position:relative;}
#gnb_test .gnb_test_1dli:hover{background:#fff;/*border-bottom:2px solid #e8180c;*/border-top:2px solid #e8180c; margin-top:-2px;}

 

모르겠습니다.. ㅠㅠ

 

이 질문에 댓글 쓰기 :

답변 4

#gnb_test #gnb_test_1dul {display:inline-block;font-weight:600;font-size:1.083em;margin:10px 650px 10px;padding: 0 0 0;background:#fff;zoom:1;} /* 메인메뉴 위치조정 380px; mong */

 

margin:10px 650px 10px여기서 왼쪽650px를 띄우니까 그러네요..

margin:10px 650px 10px을 지우고

 

#gnb_test{text-align:center;background:#fff;position:realtive;border-top:1px solid rgb(143, 140, 140);border-bottom:2px solid rgb(228, 225, 223);}

여기에 width:100%추가하세요.

<nav id="gnb_test"> 요부분을 width:100%; 해보세요

1차 메뉴 한가운데로 조정하였습니다. 

http://gnustudy.com/bbs/board.php?bo_table=gnu_manual&wr_id=18&sfl=wr_subject%7C%7Cwr_content&stx=%EB%A9%94%EB%89%B4+%EA%B0%80%EC%9A%B4%EB%8D%B0&sop=and

링크 참조해였으며,

#gnb_test #gnb_test_1dul {margin:0px auto 0;width:800px;font-weight:600;font-size:1.083em;padding: 10px 10px 10px;background:#fff;zoom:1;}

 

포인트 : margin:0px auto 0; 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 123,162 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT