CSS：父元素漂浮在<a>標籤內容施加太大

Question

這是HTML代碼：

<div class="pull-left small-text"> 
    <?php 
     if($page - 1 > 0): ?> 
      <a href="<?php echo $page_link.'&p='.($page -1); ?>" class="btn btn-white"><i class="fa fa-chevron-right"></i></a> 
    <?php 
     endif; ?> 
    <span><?php echo $page; ?> from <?php echo $pages; ?></span> 
    <?php 
     if($page < $pages) : ?> 
      <a href="<?php echo $page_link.'&p='.($page +1); ?>" class="btn btn-white"><i class="fa fa-chevron-left"></i></a> 
    <?php 
     endif; ?> 
</div> 

CSS：

.btn { 
    border:none; 
    background: none; 
    color: #fff; 
    padding: 10px 30px; 
    text-align: center; 
    font-size: 0.9em; 
    border-radius: 4px; 
} 
.pull-left{ 
    float:left; 
} 

問題：當我添加pull-left類的父元素，<a>標籤圖標向左，發生了什麼事：

result

注意：pull-left = float：left;

Answer 1

添加display:inline-block到btn類