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>标签图标向左移动，这是正在发生的事情：

结果

注意：左拉=浮点：左;

Answer 1

将display:inline-block添加到类btn