如何放置浮动：对；Font Awesome 图标在同一行？
在下面的代码中应用 float: right; 在 i 标记上，Font Awesome 图标箭头向右但不在同一行上。
我希望箭头应该像附加图像一样在同一条线上。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style type="text/css">
.content {
display: block;
margin: 0 auto;
height: 40px;
line-height: 40px;
width: 300px;
padding: 0px 20px 0px 20px;
border: 1px solid red;
}
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 40px;
}
i {
float: right;
color: green;
display: inline-block;
}
</style>
</head>
<body>
<a class="content" href="/United Arab Emrits">
<div>National and world news with background material, activities, discussion starters and teaching guides.</div>
<i class="fa fa-chevron-circle-right"></i>
</a>
</body>
</html>
你的 HTML 应该是这样的，我们可以添加line-height到图标类中：
<a class="content" href="/United Arab Emrits">
<i class="fa fa-chevron-circle-right my-icon"></i>
<div>National and world news with background material, activities, discussion starters and teaching guides.
</div>
</a>
并将此样式添加到您的 CSS 中：
.my-icon{
line-height:40px;
}
工作小提琴： http://jsfiddle.net/sandenay/L4pkc07e/2/