HTML、CSS：将 inline-element 附加到居中 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)。另外两个vote-arrows。对于包含数字的那个，我想在数字旁边添加一个 "badge"（在 bootstrap 上下文中），比方说在右边。你可以看到我的尝试透过彩色叠加层闪耀。

目标是让数字分别居中 arrow-icons，同时将徽章分别放置在数字的偏移量（或 "right next to"）中。

我的尝试是为徽章设置一个 float: right;，但如您所见，该数字现在有一个偏移量。当我在徽章上尝试 position: absolute; 时，没有偏移（根据需要），但我无法在数字旁边获得徽章，我只能将其附加到右边框，因为我没有数字不再是 positioning-reference。

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

编辑 1：

因为我希望它看起来像 (positioning-wise):

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>

HTML、CSS：将 inline-element 附加到居中 inline-element 的右侧

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

html

css

inline

center