Right border of div being cut off when using float:right with font awesome icon
Fiddle of the below code
** Update: The border shows in Firefox but not Chrome. **
CSS:
.right{
float:right;
}
.buttonBorder{
border: 1px solid black;
padding:0px 10px 0px 10px;
}
HTML:
<div>
<span>11 in stock!</span>
<span class="buttonBorder">Add to <i class="fa fa-shopping-cart"></i></span>
</div>
<div class="right">
<span>11 in stock!</span>
<span class="buttonBorder">Add to <i class="fa fa-shopping-cart"></i></span>
</div>
Result:
The first div is not being floated to the right. When I do float the div to the right, it cuts off the border. I've tried adding margin-right and padding-right to the div, span and i elements and it doesn't appear to work.
How do I make the span show the border when the div is floated to the right?
开始了 ：）
.right{
float:right;
width:200px;
text-align:right;}
class .fa sets display:inline-block
override .fa for floated elements:
.right .fa{
display: inline;
}
I just use
.right {
float: right;
width: 30%;
margin-right: 0px;
}
And works good for me!
See my example
链接地址: http://www.djcxy.com/p/21986.html上一篇: 更改菜单栏字体大小