html - 我怎样才能把它放在水平内联 block 中？

Question

我有这个，我想要它内联 block 但水平。现在它作为内联 block 工作但垂直。

这是我的HTML

<div class="ondisplay">
            <div class="left-text">
                <p>Newest</p>
            </div>
            <div class="toggle">    
                <input type="checkbox" value="yes" id="toggle" name="check" />
                <label for="toggle"></label>
            </div>
            <div class="right-text">
                <p>Most Popular</p>
            </div>
        </div>

这是我的CSS

.ondisplay {
    text-align:center;
    display: inline-block;
  }

Answer 1

同时将 inline-block 添加到子 div's 中，以便它们在一行中对齐，父级 inline-block 将给出确切的子项

.ondisplay {
  text-align: center;
  display: inline-block;
}
.ondisplay div {
  display: inline-block;
}

<div class="ondisplay">
  <div class="left-text">
    <p>Newest</p>
  </div>
  <div class="toggle">
    <input type="checkbox" value="yes" id="toggle" name="check" />
    <label for="toggle"></label>
  </div>
  <div class="right-text">
    <p>Most Popular</p>
  </div>
</div>