Question

我想并排排列两个元素。元素具有ID“stats”和“nextButton”。它们像DIV一样出现在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％的宽度，因此即使您说内联块，它也会将另一个元素推送到下一行。摆脱那个宽度然后统计和＆amp;按钮将是内联的。

Answer 2

宽度：100％;你在.stats类上设置了导致该div与其父级一样宽，并阻止该按钮能够在它旁边排列。

Answer 3

您的班级stats的元素有100％的width因此它不会让另一个元素拉到它的一边。

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

＆＃13;

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

＆＃13;

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

＆＃13;

指定“display：inline-block”但我的项目没有显示为内联

3 个答案: