Question

我有一个简单的<div>结构如下

<div>
    <a href="www.google.com">Google</a>
    <div>
        <i class="fa fa-gear display-this-inline"></i>
    </div>
</div>

我想直接在链接内容的右侧显示字体真棒图标。这最容易实现的目标是什么？

JSFiddle

编辑：我无法控制内部div，现实问题要复杂得多，我在这里简化了它。内部div是必需的。

Answer 1

删除包含<div>：

<div>
    <a href="www.google.com">Google</a>
    <i class="fa fa-gear"></i>
</div>

https://powerbi.microsoft.com/pricing

或者，如果您无法更改当前的标记：

a + div{
    display: inline-block;
}

最好的方法是将更具体的选择器（类或id）分配给锚或div。

JSFiddle

Answer 2

按照George的建议删除包含div。

你甚至可以更进一步。

<div>
    <a href="www.google.com">Google <i class="fa fa-gear display-this-inline"></i></a>
</div>

JSfiddle Demo

Answer 3

使用float: left

＆＃13;

.display-this-inline{
    font-size:20px;
    display:inline;
}

a{
    float: left;
    margin-right: 5px;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <a href="www.google.com">Google</a>
    <div>
        <i class="fa fa-gear display-this-inline"></i>
    </div>
</div>

＆＃13;

使用父div内容显示子div内联

3 个答案: