1차메뉴 크기조절시 이상현상이 있어요.
본문
안녕하세요 그누보드를 사용해서 사이트 제작연습을 하고 있습니다.
1차 메뉴인 gnb가 브라우저창 조절을 하면 이상하게 변경되는 현상이 있는데요!
제가 생각한것은 min, max? 이 두개값이 안정해져서 그런거 같지만 아무리 해도 안되서
도움을 요청하고자 글을 남깁니다.
이랬던 메뉴가
이렇게 됩니다 ㅠㅠ
<-- 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차 메뉴 한가운데로 조정하였습니다.
링크 참조해였으며,
#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;