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

Question

I am facing an issue in aligning html elements with a text. Here is my code:

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

As you can see, the text header is placed next to a checkbox which I am able to do. But the drop down and the checkbox should be right next to the text def . But I am unable to do the alignment.

I tried using css properties like float: left and margin-left but that doesn't do anything. What am I doing wrong?

Answer 1

You can use inline-block property instead of 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>