如何将其置于水平内联块中？

Question

我有这个我希望它内联块但水平。现在它作为内联块工作但垂直。

这是我的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

还会向{child} inline-block添加div's，以便他们在一行中对齐，而父inline-block会给出确切的孩子

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;