모바일에서 버튼 가로정렬 CSS 궁금합니다
본문
버튼이 4개이고 PC상에선 잘 보이는데 모바일에서는 2개만 정렬되고 2개는 아래로 떨어지네요
CSS를 어떻게 꾸며야 할지요?
현재CSS는
#tail_btn {width:100%;}
#tail_btn li {list-style:none;float:left; width:25%; }]
#ft ul {margin:0;padding:0;list-style:none;}
li.st1 {float:left; border-right:0px;}
==================================================================================
<div id="ft">
<div id="tail_btn">
<!-- Tel BTN -->
<li><a href="tel:" /><img src="<?php echo G5_URL ?>/img/btn_1.gif" width="100%" border="0"></a></li>
<!--// Tel BTN -->
<!-- Tel BTN -->
<li><a href="tel:"><img src="<?php echo G5_URL ?>/img/btn_2.gif" width="100%" border="0"></a></li>
<!--// Tel BTN -->
<!-- Tel BTN -->
<li><a href="sms:"><img src="<?php echo G5_URL ?>/img/btn_3.gif" width="100%" border="0"></a></li>
<!--// Tel BTN -->
<!-- KakaoTalk BTN -->
<li class="st1"><a href="javascript:;" id="kakao"><img src="<?php echo G5_URL ?>/img/btn_4.gif" width="100%" border="0"></a></li>
<!--// KakaoTalk btn -->
</div>
<!-- KakaoTalk Background -->
<img src="<?php echo G5_URL ?>/img/tail.jpg" width="100%">
<!--// KakaoTalk Background -->
</div>
