Html 如何放置浮动：对；Font Awesome 图标在同一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33066218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to put float: right; Font Awesome icon on same line?
提问by Syed
In the code below after applying float: right; on i tag the Font Awesome icon arrow goes to the right but not on same line.
在下面的代码中应用 float: right; 在 i 标记上，Font Awesome 图标箭头向右但不在同一行上。
I want the arrow should be on same line like attached image.
我希望箭头应该像附加图像一样在同一条线上。
<!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>
采纳答案by Sandeep Nayak
Your HTML ought to be like this and we can add line-heightto the icon class:
你的 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>
and add this style to your CSS:
并将此样式添加到您的 CSS：
.my-icon{
line-height:40px;
}
Working fiddle: http://jsfiddle.net/sandenay/L4pkc07e/2/
回答by Saeed ur Rehman
You have closed your div and defined <i></i>outside the div which is creating new line for your image. close your div after defining the image.
sample.
您已关闭 div 并<i></i>在 div 之外定义，这将为您的图像创建新行。定义图像后关闭您的 div。样本。
<div> <i></i> </div>
回答by Raju Bera
You need to change the css as following:
您需要按如下方式更改 css：
.content {
display: block;
margin: 0 auto;
height: 40px;
line-height: 40px;
width: 300px;
padding: 0px 20px 0px 20px;
border: 1px solid red;
position: relative;
}
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 40px;
}
i {
float: right;
color: green;
position: absolute;
right: 10px;
top:10px;
}
Please check the jsfiddle link for your solution: http://jsfiddle.net/wv1mnyqk/
请检查您的解决方案的 jsfiddle 链接：http: //jsfiddle.net/wv1mnyqk/
