html - CSS: parent element float apply on <a> tag content too -


this html code:

<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; ?> <?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; } 

problem: when add pull-left class parent element , <a> tag icon goes left, it's what's happening:

result

note: pull-left = float:left;

add display:inline-block btn class


Comments

Popular posts from this blog

node.js - Node js - Trying to send POST request, but it is not loading javascript content -

javascript - Replicate keyboard event with html button -

javascript - Web audio api 5.1 surround example not working in firefox -