在Div中心显示两个项目并右对齐

Question

我无法将div中的两个html标签放在同一行并对齐中心（

）和右（）。我认为设置display: inline-block;和float: right会将我的跨度与div的右侧对齐，但看起来我的跨度出现在当前设置中div标签之外。在我目前的设置中是否存在我做错的事情。

HTML：

<div class="record-card__date">
   <p>09/01/2017</p>
   <span class="glyphicon glyphicon-circle-arrow-up record-card__glyphicon"></span>
</div>

CSS：

    .record-card__date {
        text-align: center;
        background-color: #014421;
        color: #FFF;
        padding: 0 15px 0 15px;
        margin: 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

.record-card__glyphicon {
    display: inline-block;
    float: right;
    margin: 2px 0 0 0;
}

Answer 1

您正在使用块级<p>元素占用100％的空间。然后尝试在同一行中强制内联元素。将图标插入最后的段落并通过向右浮动图标来完成相同的操作会好得多。

 <p>09/01/2017
   <span class="glyphicon glyphicon-circle-arrow-up record-card__glyphicon"></span>
 </p>

Answer 2

p元素是一个块元素，因此它会自动创建一个换行符。您需要做的就是将p元素和span元素都设置为“inline-block”。你根本不需要使用“浮动”。使用float：right;将元素从流中取出，这就是为什么它没有显示在div中。

.record-card__glyphicon {
    display: inline-block;
    margin: 2px 0 0 0;
}

.record-card__date p {
display:inline-block;
}