指定 "display:inline-block" 但我的项目未内联显示

Question

我想并排排列两个元素。这些元素的 ID 为 "stats" 和 "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>

但是尽管我在所有内容上都指定了 "display:inline-block"，但这些项目并没有并排排列 -- https://jsfiddle.net/0k0ahs64/3/。我还需要做什么才能使两个有问题的 div 彼此相邻显示（在同一行上）？

Answer 1

您当前将 .stats 设置为 100% 的宽度，因此即使您设置 inline-block，它也会将另一个元素推到下一行。摆脱那个宽度，然后统计数据和按钮将内联。

Answer 2

宽度：100%；您在 .stats class 上设置导致 div 与其父级一样宽，并阻止按钮能够在其旁边排列。

Answer 3

带有 class 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>

指定 "display:inline-block" 但我的项目未内联显示

Specifying "display:inline-block" but my items are not appearing inline

html

css

display