Невозможно выровнять определенные элементы 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:

<div style="margin-left: 25px;">
  <input class="filter" type="checkbox" style="display: inline-block; margin-top: 5px;">
  <h3 style="display: inline-block;">def</h3>
  <select style="display: inline-block; 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="display: inline-block; margin-top: 5px;">
</div>