在HTML中对齐对象

Question

我很难让这些正确对齐。
代码是这样的：

<div style="display: inline-block;margin-left:10px;">
  <div>
    <label class="inline right" for="ADD2">Address 2</label>
  </div>

  <div>
    <input type="text" style="width: 525px;" id="ADD2"></input>
  </div>
</div>

<div style="display: inline-block; margin-left:10px; ">
  <label for="DOB">DOB</label>
  <input id="DOB"></input>
</div>


<div style="display: inline-block; margin-left:10px; ">
  <label for="GEN">GENDER</label>
  <div>
    <select style="width:75px; height:25px;" id="GEN">
      <option value="0"></option>
      <option value="1">Male</option>
      <option value="2">Female</option>
    </select>
  </div>
</div>

我需要的是标签DOB与其他标签对齐，然后实际对象也应排成一行。我觉得我尝试了所有组合，但我确信我错过了很简单的东西。

现在，它看起来像下面的图像 我该如何解决这个问题？

Answer 1

First inputs are self enclosing, so you do not put a </input> at the end. Second the DOB isn't inline with the rest of them because it is the only one that was not closed in its own div see below

<div style="display: inline-block;margin-left:10px;">
  <div>
    <label class="inline right" for="ADD2">Address 2</label>
  </div>

  <div>
    <input type="text" style="width: 525px;" id="ADD2">
  </div>
</div>

<div style="display: inline-block; margin-left:10px; ">
  <div>
    <label for="DOB">DOB</label>
  </div>

  <div>
    <input id="DOB">
  </div>
</div>


<div style="display: inline-block; margin-left:10px; ">
  <label for="GEN">GENDER</label>
  <div>
    <select style="width:75px; height:25px;" id="GEN">
      <option value="0"></option>
      <option value="1">Male</option>
      <option value="2">Female</option>
    </select>
  </div>
</div>
Edited per showdevs comment, I didn't realize they were all nested when I glanced through.

Answer 2

Use following:

<div style="display: inline-block;margin-left:10px;">
    <div style="display:inline">
        <label class="inline right" for="ADD2">Address 2</label>
    </div>

    <div style="float: right; display: inline; margin-left: 10px;">
        <input type="text" style="width: 525px;" id="ADD2"></input>
    </div>
</div>

<div style="display: inline-block; margin-left:10px; ">
    <label for="DOB">DOB</label>
    <input id="DOB"></input>
</div>


<div style="display: inline-block; margin-left:10px; ">
    <label for="GEN">GENDER</label>
    <div style="float: right;display: inline;">
        <select style="width:75px; height:25px;" id="GEN">
            <option value="0"></option>
            <option value="1">Male</option>
            <option value="2">Female</option>
        </select>
    </div>
</div>