在标题中组织右侧元素

Question

我为标题编写了如下代码：

＆＃13;

＆＃13;

html,
body {
  width: 100%;
  min-width: 992px;
}
#content {
  width: 100%;
  padding: 0px;
}
#header {
  /*background-color: #166bb3;
    height: 85px;
    min-width: 992px;
    width: 1024px;*/
  /* padding: 0 6%;*/
  margin-right: auto;
  margin-left: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E5E5E5;
  background-color: #166bb3;
}
#logo {
  padding: 20px 0px;
}
#headerdetails {
  padding: 25px 0px;
  min-width: 400px;
}
.hddtlsItems {
  color: #ffbf00;
  font-size: 18px;
  text-align: right;
  padding: 0px;
  min-width: 120px;
}
.subhddtlsItems {
  color: #FFF;
  /*margin-right: 3%;*/
  font-size: 9px;
  /* padding: 0px;*/
  float: right;
  min-width: 61px;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="header" role="banner">
  <div class="container clearfix">
    <img id="logo" src="images/logo.png" alt="logo">
    <div id="headerdetails" class="pull-right col-md-5"> <span class="col-md-3 hddtlsItems pull-right"><img src="images/routes.png" alt="r" style="width: inherit;">14567
                    <span class="subhddtlsItems">Routes</span>
      </span> <span class="col-md-3 hddtlsItems pull-right"><img src="images/transaction.png" alt="t" style="width: inherit;">$345.45
                    <span class="subhddtlsItems">Transaction values</span>
      </span> <span class="col-md-3 hddtlsItems pull-right"><img src="images/conversation.png" alt="c" style="width: inherit;">18456
                    <span class="subhddtlsItems">Conversations</span>
      </span>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

但右侧元素与此图中所示的相同：

如何将字幕向上移动如图所示？其他元素如18456，$345等都是合适的。为获得最佳效果，请执行上述代码并全屏查看。

Answer 1

根据您的布局，您只需添加

即可

position: relative;
top: -8px;

（或任何像素值）到.subhddtlsItems但它并不是实现这一目标最干净的方法。不幸的是，我必须改变你的所有布局，以使某些东西更易于维护和保持一致。