我怎样才能把它放在水平内联块？

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

还添加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>