html - 在 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

您正在使用 block 级别 <p>将占据 100% 空间的元素。然后尝试在同一行中强制使用内联元素。将图标插入到段落末尾并通过向右浮动图标来完成同样的事情会好得多。

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