Question

我想创建一个看起来像带有＆＃34;加＆＃34;的圆圈的图标。它内部和右下方的图标是一个描述性p标记。

因为我的理由我无法弄清楚这样做完全打破整个街区。我做错了什么？

这是HTML：

<div class="follow-single">
    <div class="follow-wrapper">
        <a class="follow" id="@follow_4" rel="nofollow" data-method="put" href="/jessie/follow">
            <span class="glyphicon glyphicon-plus"></span>
            <p class="title">Unfollow</p>
        </a>
    </div>
</div>

CSS：

follow-single {
    max-width: 360px;
    margin: 0 auto;
    border-top: 1px solid #ddd;
    margin-top: 20px;
    padding-top: 20px;
}
.follow-single .follow-wrapper {
    text-align: center;
}
.follow-single .follow-wrapper .follow {
    color: #3c763d;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    padding: 10px 17px;
    border-radius: 4px;
}
.follow-single .follow-wrapper a {
    text-decoration: none;
}
.follow-single .follow-wrapper .title {
    font-size: 12px;
    display: block;
}

Answer 1

将achor标签上的显示设置为内嵌块。

.follow {
    display: inline-block;
}

Fiddle

此外，与原始问题无关，您对follow-single的定义缺少一个前导点字符：.follow-single

链接包装块打破元素

1 个答案: