html - How to switch position from left to bottom without using absolute positioning and negative margins? -


by using selector .icon-bottom, how should position icon bottom? tried using absolute/relative position elements inside li doesn't behave properly. used negative margins. please me play it. thanks! fiddle here

  <ul class="icon-bottom">     <li><a href="#"><i class="fa fa-home"></i>tab1</a></li>     <li><a href="#"><i class="fa fa-beer"></i>tab2</a></li>   </ul> 

a quick solution, use table.

li { display:inline-block;border:1px solid #ddd }  li { text-align:center;padding:10px 20px;display:table }  li .fa{ display:table-footer-group; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>  <ul class="icon-bottom">    <li><a href="#"><i class="fa fa-home"></i>tab1</a></li>    <li><a href="#"><i class="fa fa-beer"></i>tab2</a></li>  </ul>


Comments

Popular posts from this blog

Payment information shows nothing in one page checkout page magento -

tcpdump - How to check if server received packet (acknowledged) -