Html 如何在同一直线上放置多个跨距？

我试图在这里实现这个UI

因此，我创建了4个跨距，将它们设置为左浮动和显示内联块。好像什么都没用

---

CSS

.小组{
边界半径：0px！重要；
背景色：#4D8FCB；
颜色：白色；
左边距：25px；
右边距：25px；
}
.小组标题{
高度：114px；
}
.小组委员会{
字体大小：10px；
背景色：白色；
}
.sa-h1{
颜色：白色；
字体大小：39px；
字体大小：粗体；
字体风格：普通；
字体系列：“adelle sans”，无衬线；
}
.sa-h2{
字号：28px；
}
.sa-h3{
字体大小：16px；
}
.sa-h4{
字体大小：14px；
}
.sa-h5{
字体大小：12px；
}
.sa-h6{
字体大小：10px；
}
.sa正确的项目{
填充：5px20px；
浮动：左；
}
.sa答案、.sa分数、.sa审查、.sa报告{
垂直对齐：中间对齐；
显示：内联；
}

---

HTML

部分


2.2

练习

第2.2节练习

代数1

02/09/2015
11/25
项目回答正确

44%
得分


复习


查看报告
目录

---

结果

他们互相叠得很厉害

我该如何阻止这种情况并实现我想要的

如有任何提示/建议，将不胜感激

---

-如果您需要它。更改此样式：

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

……为此：

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

您可能还需要添加

文本对齐：居中和一些填充

更改显示：内联；显示：内联块

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

仅供参考，您可以使用引导网格并大量清理HTML和CSS。要按所需格式安排项目，您可以执行以下操作：

<div class="row panel">
    <div class="col-xs-3">
        <span class="sa-h2">11/25</span>
        <span class="sa-h6">ITEMS ANSWERED CORRECTLY</span>
    </div>
    <div class="col-xs-3">
        <span class="sa-h2"> 44% </span> 
        <span class="sa-h6">SCORE</span>
    </div>
    <div class="col-xs-3">
        <img width="40px" src="http://s6.postimg.org/tf27pu3el/review_white.png" />
        <span class="sa-h6">REVIEW</span> 
    </div>
    <div class="col-xs-3">
        <img width="40px" src="http://s6.postimg.org/4ag99ja9p/report_white.png" />
        <span class="sa-h6">VIEW REPORT</span>
    </div>
</div>

有关输出，请参阅此项。
是。你认为呢？我应该使用
collg-#
如果您使用的跨度太大，请使用引导网格。
.sa-answer, .sa-score, .sa-review, .sa-report {
  vertical-align: middle;
  display: inline-block;
}

<div class="row panel">
    <div class="col-xs-3">
        <span class="sa-h2">11/25</span>
        <span class="sa-h6">ITEMS ANSWERED CORRECTLY</span>
    </div>
    <div class="col-xs-3">
        <span class="sa-h2"> 44% </span> 
        <span class="sa-h6">SCORE</span>
    </div>
    <div class="col-xs-3">
        <img width="40px" src="http://s6.postimg.org/tf27pu3el/review_white.png" />
        <span class="sa-h6">REVIEW</span> 
    </div>
    <div class="col-xs-3">
        <img width="40px" src="http://s6.postimg.org/4ag99ja9p/report_white.png" />
        <span class="sa-h6">VIEW REPORT</span>
    </div>
</div>

 .panel {
    border-radius: 0px !important;
    background-color: #4D8FCB;
    color: white;
    margin-left: 25px;
    margin-right: 25px;
    padding: 10px 0;
    text-align: center;
}
.sa-h2, .sa-h6 {
    display: block;
}
.sa-h2 {
    font-size: 28px;
}
.sa-h6 {
    font-size: 10px;
}