css 문의드립니당^^
본문
* UI Object */
#menu_con {position:relative;float:left;width:100%;background:#fff;margin:0px;padding 10px 0;}
#menu_con .menu{margin:20px;padding:0 0 0 10px;}
#menu_con .menu li{display:inline;float:left;width:87px;margin:0 13px 20px 0;padding:0;text-align:center;}
#menu_con .menu li a{color:#000;text-decoration:none;font-size:1em;letter-spacing:-1px;}
#menu_con .menu li img{display:block;margin-bottom:13px;}
/*/UI Object */
#menu_con {position:relative;float:left;width:100%;background:#fff;margin:0px;padding 10px 0;}
#menu_con .menu{margin:20px;padding:0 0 0 10px;}
#menu_con .menu li{display:inline;float:left;width:87px;margin:0 13px 20px 0;padding:0;text-align:center;}
#menu_con .menu li a{color:#000;text-decoration:none;font-size:1em;letter-spacing:-1px;}
#menu_con .menu li img{display:block;margin-bottom:13px;}
/*/UI Object */
vega r2로 위치를 설정했는데.. 노트로 보니.. 한쪽으로 쏠려 있더라구요,,,,위 그림처럼 한쪽으로 쏠려있네여
어케해야 중앙으로 배열이 될까요 ``;;
아이콘들이..... 왼쪽정렬이 되더라구요... 해서 위에 빨간색 float:left 를 삭제하고 margin:0 auto; 로 바꿨는데요
3번째 그림처럼 나오네요..ㅡㅜ
답변 4
코딩소스가 없어서 정확하진 않지만 대충 이렇게 하면 안될런지요.
<style>
#menu_con {background:#fff;margin:0;padding:10px;}
#menu_con .menu{margin:0;padding:0;list-style:none;}
#menu_con .menu li{float:left;width:33.3%;margin:0;padding:10px 0;text-align:center}
#menu_con .menu li a{display:inline-block;color:#000;text-decoration:none;font-size:0.75em;letter-spacing:-0.03em;margin:0;}
#menu_con .menu li img{display:block;margin:0 0 10px;}
</style>
<div id="menu_con">
<ul class="menu">
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
<li><a href=""><img src="" alt=""/>공지사항</a></li>
</ul>
</div>
오! 감사합니다... ~~ ^^ 대단하십니다..
#menu_con .menu 이게 ul 인가요?
#menu_con .menu{margin:20px;padding:0 0 0 10px;} 에서
#menu_con .menu{width:99%; magin:0 auto; padding:20px 0 20px 10px} 이렇게 하면 되지 않을까요?
답변 갑사합니다.~~~~~
적용을하니,,, 왼쪽여백은 완전없어지고(왼쪽으로 완전붙음) 오른쪽여백이 생기네요..ㅜㅜ
답변 갑사합니다.~~~~~
적용을하니,,, 왼쪽여백은 완전없어지고(왼쪽으로 완전붙음) 오른쪽여백이 더생기네요..ㅜㅜ
많은 도움이 되었습니다. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
