html - 在标题中组织右侧元素

Question

我写了一段header代码如下:

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;
}

<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>

但是右边的元素与这张图片中显示的不一样:

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

Answer 1

根据你的布局，你可以添加

position: relative;
top: -8px;

(或任何像素值)到 .subhddtlsItems 但这不是实现此目的的最干净方法。不幸的是，我将不得不更改您的所有布局以使内容更易于维护和一致。