html - 仅使用 css 更改元素的位置

Question

我有一个网络表单，它的输入包裹在 div 中，看起来像这样

Name
tbFirstName  lblFirstName  tbLastName lblLastName

这是它的 html 标记

<div class="editor-label">
   <label>Name:</label>
</div>

<div class="editor-field">
<span>
    <input id="LastName" name="LastName" type="text" value="" />
    <label for="LastName">Last Name</label>
</span>
<span>
    <input id="FirstName" name="FirstName" type="text" value="" />
    <label for="FirstName">First Name</label>
</span>
</div>

我想知道如何将输出更改为看起来像这样而不是仅使用 css

Name
tbFirstName  tbLastName 
lblFirstName lblLastName  

感谢您的帮助。

Answer 1

.editor-field span {float: left; margin-right: 10px;} // the margin is optional
.editor-field input {display: block;}