Question

（标题可能听起来很愚蠢，但我不知道如何把它变得更复杂。）

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

enter image description here

<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）。其他两个投票箭头。对于包含该号码的人，我想添加一个＆＃34;徽章＆＃34; （在引导环境中）就在数字旁边，让我们向右说。你可以看到我的尝试在彩色叠加层中闪耀。

目标是将数字分别置于箭头图标的中心位置，同时将徽章分别放置一个偏移（或＃34;右边的＃34;）。

我的尝试是为徽章设置float: right;，但正如您所看到的，该数字现在有一个偏移量。当我在徽章上尝试position: absolute;时，没有偏移（按照需要），但我无法在号码旁边获得徽章，我只能将其附加到右边界，因为我没有＆＃ 39; t将数字作为定位参考。

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

编辑1：

我希望它看起来像（定位）：

ui-ideal

Answer 1

我们一起使用相对和绝对位置：

DEMO： 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：将内联元素附加到居中的内联元素的右侧

3 个答案: