모바일에서 버튼 가로정렬 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>