html - 如何让 HTML 表单与前一个表单的右侧对齐？

Question

我有两个 HTML 表单。我希望第二个对齐到第一个的右边(而不是在它下面)。

我摆弄(没有双关语意)“display: inline-block;”

相关的CSS:

.form {
    display: inline-block;
}

相关的 HTML:

<form>
    <label class="firstblocklabel">Traveler's name:</label>
    <input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
    </br>
    . . .
</form>

<form>
    <label>Trip Number:</label>
    <input type="text" id="tripnumber" title="If Applicable" />
    </br>  
</form>

可以看到整个shebang here .

是将两个表格放在一个表格中的解决方案，还是有更优雅的元素解决方案？

Answer 1

使用 float ...

form {
    float: left
}

在第二个表单上粘贴一个 float:right 使其与右侧对齐。