无法将某些html元素与纯CSS对齐？

Question

我在将html元素与文本对齐时遇到问题。这是我的代码：

<div id="app">

  <input class="table" type="checkbox" style="float: left; margin-top: 5px;>">
  <div style="margin-left: 25px;"> header
    <h2></h2>
  </div>

  <div style="margin-left: 25px;">
    <input class="filter" type="checkbox" style="float: left; margin-top: 5px;">
    <h3>def</h3>
    <select style="float: left; margin-top: 5px" ;>
      <option value="p">Place</option>
      <option value="t">Time</option>
      <option value="f">Fee</option>
    </select>
    <input class="filter" type="checkbox" style="float: left; margin-top: 5px;">
  </div>

</div>

如您所见，文本header放在我能够执行的复选框旁边。但是下拉菜单和复选框应该在文本def的旁边。但是我无法对齐。

我尝试使用css属性，例如float: left和margin-left，但这没有任何作用。我在做什么错？

Answer 1

您可以使用inline-block属性代替float：