html - 如何将多个跨度放在同一行中？

Question

我正在尝试在此处实现此 UI。

所以我创建了 4 跨度，将它们设置为向左浮动并显示内联 block 。似乎没有任何效果!

---

CSS

<style type="text/css">


 .panel {
  border-radius: 0px !important;
  background-color: #4D8FCB;
  color: white;
  margin-left: 25px;
  margin-right: 25px;

}

.panel-heading {
  height: 114px;

}

.panel-body {
  font-size: 10px;
  background-color: white;
}

.sa-h1 {
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
}

.sa-h2{
  font-size: 28px;
}

.sa-h3{
  font-size: 16px;
}
.sa-h4{
  font-size: 14px;
}

.sa-h5{
  font-size: 12px;
}

.sa-h6{
  font-size: 10px;
}


.sa-right-items{
  padding: 5px 20px;
  float: left;
}

.sa-answer, .sa-score, .sa-review, .sa-report {
  vertical-align: middle;
  display: inline;
}


</style>

---

HTML

<div class="row student-accordion ">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="row panel-heading">
          <div class="panel-title">

           <div class="col-xs-1 sa-section" style="border-right: 2px solid #c9cacb;">

            <p><span class="sa-h5">SECTION</span>
              <br>
              <span id="sa-section-num" class="sa-h1">2.2</span>
              <br><span class="sa-h5">EXERCISE</span>
            </p>
          </div>

          <div class="col-xs-6 col-lg-6">
            <span class="sa-h3">Section Exercise 2.2</span><br>
            <span class="sa-h5">ALGEBRA 1</span> <br>
            <span class="sa-h4">02/09/2015</span>

          </div>

          <div class="sa-right-items">
           <span class="sa-answer">
            <span> 11/25 <br> <span class="sa-h6">ITEMS ANSWERED <br> CORRECTLY</span> </span>
          </span>

          <span class="sa-score">
           <span> 44% <br> <span class="sa-h6">SCORE</span> </span>
         </span>

         <span class="sa-review">
          <img width="40px" src="/BIM/resources/images/icons-report/review_white.png"><br>
          <span> <span class="sa-h6">REVIEW</span> </span>
        </span>


        <span class="sa-report">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse"  class="pull-right">
            <img width="40px" src="/BIM/resources/images/icons-report/report_white.png"><br>
            <span> <span class="sa-h6">VIEW REPORT</span> </span>
          </span>
        </span>

      </div>

    </div>


  </div>
  <div id="student-accordion-collapse" class="panel-collapse collapse">
    <div class="panel-body">

     Contents

   </div>
 </div>
</div>

---

结果

它们可怕地堆叠在一起。

我如何阻止它并实现我想要的？

任何提示/建议将不胜感激!

---

Here is my Fiddle - 如果你需要的话。

Answer 1

更改此样式:

.sa-answer, .sa-score, .sa-review, .sa-report {
   display: inline;
}

……对此:

.sa-answer, .sa-score, .sa-review, .sa-report {
  display: inline-block;
}

您可能还想添加 text-align: center; 和一些填充。

Fiddle