logo标签列表

如何将浮动:right;的Font Awesome图标放在同一行？

htmlcss
6
在下面的代码中，将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>

In the code above the output should be like attached image.

3个回答
4
您的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/

0
你已经关闭了你的 div 并在 div 外定义了 <i></i>，这为你的图像创建了新行。在定义图像后关闭你的 div。 示例。
<div> <i></i> </div>
0
你需要按照以下方式更改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;
}

请检查以下jsfiddle链接以获取您的解决方案： http://jsfiddle.net/wv1mnyqk/
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接