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
Post a Comment