Modification du positionnement des éléments en utilisant simplement css

Question

J'ai un formulaire en ligne qui a des entrées enveloppés dans divs qui ressemble à ceci

Name 
tbFirstName lblFirstName tbLastName lblLastName 

Voici le balisage HTML pour elle

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

Je me demandais sur comment je pourrais changer la sortie pour ressembler à ceci en utilisant simplement css

Name 
tbFirstName tbLastName 
lblFirstName lblLastName 

Merci pour toute aide.

Answer 1

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

Answer 2

J'ai déplacé vos étiquettes avant les entrées.

.editor-field span {float:left;} 
.editor-field span label {display:block;} 

Markup

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

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