한칸에 네개를 진열하고 싶은데요.
본문
수고하십니다.
아래와 같이 25%를 주고
pc와 모바일에서 4개씩 진열이 되게 하고 싶은데요.
pc에서는 네개가 잘 나오는데
모바일에서는
한줄로 구현이 되는데
네개로 진열되게 할 수있을까요?
<div class="tabs div-tab-box tabs-color-bg">
<ul class="nav nav-tabs nav-justifiedtext-center">
<li style="width:25%;" class="active">
<a href="<?php echo G5_URL;?>/bbs/page.php?hid=b36a">선물세트(대)</a>
</li>
<li style="width:25%;">
<a href="<?php echo G5_URL;?>/bbs/page.php?hid=b36b">선물세트(소)</a>
</li>
<li style="width:25%;">
<a href="<?php echo G5_URL;?>/bbs/page.php?hid=b36c">디퓨저 탈취제</a>
</li>
<li style="width:25%;">
<a href="<?php echo G5_URL;?>/bbs/page.php?hid=b36d">펜디스펜서</a>
</li>
<li style="width:25%;">
<a href="<?php echo G5_URL;?>/bbs/page.php?hid=b36e">미니(파량용)</a>
</li>
<li style="width:25%;">
<a href="<?php echo G5_URL;?>/bbs/page.php?hid=b36g">휴대용 클리에어</a>
</li>
<li style="width:25%;">
<a href="<?php echo G5_URL;?>/bbs/page.php?hid=b36h">300 노멀</a>
</li>
<li style="width:25%;">
<a href="<?php echo G5_URL;?>/bbs/page.php?hid=b36i">300 프리미엄</a>
</li>
</ul>
</div>
답변 4
4개마다 </ul><ul>
답변 감사합니다.
이게 해상도에 따라서 줄 나열이 달라지고 있는데요.
일반 핸드폰 크기에서 가로로 보면 4칸이 이쁘게 잘 나오는데
세로로 보면 네개로 나오기는 하나 텍스트 크기 때문에 글씨가 아래로 떨어져서 칸이 세로 크기가 틀어 집니다.
혹시 작은 크기(세로)에서 볼때는 2개나 3개로 보여지게 하고
가로로 볼때는 4개로 보여지게 하고 싶은데
조언 좀 얻을 수 있을까요?
감사합니다.
미디어 쿼리 css 를 사용하셔야 할듯 합니다.
각 요소별 padding, margin 값이나 display 값들을 정확히 봐야 알수 있겠지만
현재 위 소스형태로 가로로 4줄이 나온다면 ul 값의 display가 flex 또는 table 로 돼 있을수도 있고
li가 float:left 항목으로 돼 있는것일수도 있습니다.
어떤 css를 불러와서 적용시키셨는지는 모르겠지만 혹시 ul 속성에 display:flex; flex-wrap:wrap;
이런식으로 적용된거라면 flex-wrap:wrap;을 삭제하시면 한줄로 나타날거에요.
답변을 작성하시기 전에 로그인 해주세요.