HTML，CSS：将内联元素附加到居中内联元素的右侧

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）。另外两个是投票箭头。对于包含数字的那个，我想在数字旁边添加一个“徽章”（在引导上下文中），让我们说在右边。您可以通过彩色覆盖层看到我的尝试。

我们的目标是让数字分别位于箭头图标的中心，同时将带有偏移量（或“紧邻”）的徽章分别放置在数字上。

我的尝试是为徽章设置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/

Answer 2

正如您所说，您可以修改 HTML。这是我的尝试：

Demo Fiddle

HTML

<div class="wrap">
  <div class="vote up">
    <i class="fa fa-angle-up"></i>
  </div>
  <div class="stat">
    <span class="score">115
    <span class="badge">+5</span>
    </span>
  </div>
  <div class="vote inactive">
    <i class="fa fa-angle-down"></i>
  </div>
</div>

CSS

.wrap{
  margin: 100px;
  text-align:center;
}
.vote{
  font-size:36px;
}
.up{
  color:green;
}
.down{
  color:red;
}
.inactive{
  color:gray;
}
.score{
  position: relative;
  display:block;
  padding: 5px 0;
}
.badge{
  background: #eee;
  padding:5px 10px;
  border-radius: 30px;
  position: absolute;
  top:0;
  margin-left:10px;
}

Answer 3

试试

演示：http://jsfiddle.net/tamilcselvan/rjv1xxo2/1/

.center-horizontal-inline {
    font-size: 2em;
    text-align: center;
}
.score {
    text-align: center;
}
.score:after {
    content:attr(data-badge);
    position: absolute;
    margin-left: .4em;
    font-size: x-small;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #FFF;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #777;
    border-radius: 10px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-3">
    <div class="center-horizontal-inline vote"> <a href="#" data-id="iZheLNnewWtMhPTQd"><i class="glyphicon glyphicon-chevron-up"></i></a>

    </div>
    <div class="score" data-badge="+5">115</div>
    <div class="center-horizontal-inline"> <a href="#" data-id="iZheLNnewWtMhPTQd"><i class="glyphicon glyphicon-chevron-down"></i></a>

    </div>
</div>