指定“显示:inline-block”但是我的物品没有在线出现

Question

我想并排排列两个元素。这些元素具有IDS"统计"one_answers" NextButton"。它们出现在这样的div中：

.revealScore {
    display: inline-block;
    vertical-align: middle;
}
#revealScoreMobile {
    padding: 10px;
    display:inline-block;
    text-align: center;
    width: 100%;
}
.stats {
    display: inline-block;
    text-align:center;
    width: 100%;
    margin: 0 auto;
}

<div id="revealScoreMobile">
    <div class="revealScore" style="display: none;"> 
        <button name="button" type="submit" class="showScore btn-feedback">Show Score</button> 
    </div>
    <div class="stats" style="">
        <div class="score">9.0</div> 
        (<span class="votesCast">1</span> votes cast)
    </div>
    <button name="next" type="button" id="nextButton" class="btn-feedback">Skip</button>
</div>

但是，尽管我已经在所有内容上指定了"显示：inline-block"，但这些项目并未并排排队-https://jsfiddle.net/0k0ahs64/3/。我还需要做些什么才能让两个div彼此相邻(在同一行(？

Answer 1

您当前的.stats设置为100％的宽度，因此即使您说内联块，它也将另一个元素推到下一行。摆脱该宽度，然后是统计数据＆amp;按钮将是内联的。

Answer 2

您的元素使用类stats具有100％的width，因此它不允许另一个元素拉到其侧面。

希望这是您想要的。很乐意在需要时解释或提供更好的解决方案。

.revealScore {
  display: inline-block;
  vertical-align: middle;
}
#revealScoreMobile {
  padding: 10px;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.stats {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}
#nextButton {
  display: inline-block;
}

<div id="revealScoreMobile">
  <div class="revealScore" style="display: none;">
    <button name="button" type="submit" class="showScore btn-feedback">Show Score</button>
  </div>
  <div class="stats" style="">
    <div class="score">9.0</div>
    (<span class="votesCast">1</span> votes cast)
  </div>
  <button name="next" type="button" id="nextButton" class="btn-feedback">Skip</button>
</div>

Answer 3

宽度：100％;您已经在.STATS类上设置了该div的宽度，并防止按钮在其旁边排队。