반응형 궁금합니다.. 도와주시면 감사합니다
본문
pc버전은 성공적으로 됬는데 모바일에서는 사진처럼 안되네요 ㅠㅠ
모바일에서 반응형으로(자동으로) 크기 맞추게 하려면 어떻게 해야하나요?
max-width 넣었는데도 안됩니다..ㅠ
<style>
#score_top{max-width:100%; position:relative;}
#score_top .tab_ar{/*width:100%;*/ height:42px; overflow:hidden; position:relative;}
#score_top .tab_ar li{}
#score_top .tab_ar li.tab{float:left;}
#score_top .tab_ar li.tab a{display:block; float:left; height:42px; line-height:42px; padding:0 96px; background:#f7f7f7; border :1px solid #cccccc; color:#666;}
#score_top .tab_ar li.tab a:hover{color:#000; background:#f2f2f2;}
#score_top .tab_ar li.tab a.on{background: ; font-weight:bold; color: ;}
#score_top .tab_ar li.tab .tabnum{display:block; float:left; height:42px; line-height:42px; padding:0 20px; background:#071f38; color:#abc0d5; font-weight:bold;}
#score_top .tab_ar li.tab .tabnum b{color:#fff;}
</style>
<div id="score_top">
<ul class="tab_ar">
<li class="tab" onclick="tabmenu_click(this)"><a class="on">가나다라</a></li>
<li class="tab" onclick="tabmenu_click(this)"><a>쀼쀼쀼쀼</a></li>
<li class="tab" onclick="tabmenu_click(this)"><a>띠띠띠띠</a></li>
</li>
</ul>
<ul class="tab_ar">
<li class="tab" onclick="tabmenu_click(this)"><a class="on">가나가나</a></li>
<li class="tab" onclick="tabmenu_click(this)"><a>삐용삐용</a></li>
<li class="tab" onclick="tabmenu_click(this)"><a>헉헉헉헉</a></li>
</li>
</ul>
<br>
</div>
답변 2
2가지 방법이 있는데, 요소를 테이블화 시켜서 자동으로 정렬되게 하는 방법과,
li 요소에 33.33333% 씩 나누는 방법이 있습니다. 지금 상태에서 쉬운건
li 요소에 넓이 지정하는게 좋겠네요.
<style>
#score_top .tab_ar {}
#score_top .tab_ar:after {content:''; display:block; clear:both;}
#score_top .tab_ar li.tab{float:left; width:33.33333%;}
</style>
넓이 : 가로 x 세로
너비 : 가로
벽 보고 반성 중. ㅡㅡ;
css @media 검색해보시면 참고되실거에요.
답변을 작성하시기 전에 로그인 해주세요.