반응형 궁금합니다.. 도와주시면 감사합니다 채택완료
냥이아빠
5년 전
조회 8,908
pc버전은 성공적으로 됬는데 모바일에서는 사진처럼 안되네요 ㅠㅠ
모바일에서 반응형으로(자동으로) 크기 맞추게 하려면 어떻게 해야하나요?
max-width 넣었는데도 안됩니다..ㅠ
</p>
<p><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>
</div></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
5년 전
2가지 방법이 있는데, 요소를 테이블화 시켜서 자동으로 정렬되게 하는 방법과,
li 요소에 33.33333% 씩 나누는 방법이 있습니다. 지금 상태에서 쉬운건
li 요소에 넓이 지정하는게 좋겠네요.
</p>
<p><style></p>
<p>#score_top .tab_ar {}</p>
<p>#score_top .tab_ar:after {content:''; display:block; clear:both;}</p>
<p>#score_top .tab_ar li.tab{float:left; width:33.33333%;}</p>
<p></style></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
s
sinbi
5년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
너비 : 가로
벽 보고 반성 중. ㅡㅡ;