HTML、CSS : Append inline-element to the right of a centered inline-element

Question

(标题可能听起来很愚蠢，但我不知道如何说得更复杂。)

正如您在下面的屏幕截图中看到的，我有 3 个堆叠的 div。

<div class="col-xs-3">
  <div class="center-horizontal-inline">
    <a class="upvote" href="#" data-id="iZheLNnewWtMhPTQd">
  </div>
<div class="score">
  115
  <span class="badge score-diff vertical-align"> +5 </span>
</div>
<div class="center-horizontal-inline">
</div>

中间的那个包含数字 (115)。另外两个投票箭头。对于包含数字的那个，我想在数字旁边添加一个“徽章”(在 bootstrap 上下文中)，比方说在右边。您可以通过彩色叠加层看到我的尝试。

目标是让数字分别位于箭头图标的中心，同时将徽章分别放置在数字的偏移量(或“紧挨着”)。

我的尝试是为徽章设置一个 float: right;，但如您所见，数字现在有一个偏移量。当我在徽章上尝试 position: absolute; 时，没有偏移(根据需要)，但我无法将徽章放在数字旁边，我只能将其附加到右边框因为我没有号码作为定位引用了。

希望我的解释足够清楚。我也不知道如何搜索那个问题...

编辑 1:

因为我希望它看起来像(定位方面):

Answer 1

我们开始吧，同时使用相对和绝对位置:

演示: http://jsfiddle.net/1qbo7uwn/

HTML

<div class="score">
    <span class="score-wrap">
        <span class="score-main">123</span>
        <span class="score-diff">8</span>
    </span>
</div>

CSS

.score {
    width: 80px;
    border: 2px solid blue;
    padding: 10px 0;
    text-align: center;
}

.score-wrap {
    display: inline-block;
    position: relative;
}

.score-main {
    border: 2px solid green;
}

.score-diff {
    position: absolute;
    border: 2px solid red;
    left: 100%;
    top: -2px;
}

在 HTML 中添加了一些 span 标签。

编辑:通过设置行高垂直对齐所有内容。

http://jsfiddle.net/1qbo7uwn/1/