CSS調整表格上三個字段的寬度

Question

請將這些div對齊。名字和姓氏在一行上。調整所有這3個領域的寬度

 <form id="form1" runat="server"> 
     <div class="Userbox">   
     <div class="UserNameDiv"> 
     <strong>Username</strong> 
     <asp:TextBox ID="UserName" runat="server" MaxLength="50"></asp:TextBox> 
    </div> 
     <div class="UserNameDiv" > 
     <strong>First Name</strong> 
     <asp:TextBox ID="FirstName" runat="server"></asp:TextBox> 
     <strong>Last Name</strong> 
     <asp:TextBox ID="LastName" runat="server"></asp:TextBox>  
    </div> 
    <div id="EmailAddress"> 
     <strong>Email</strong> 
     <asp:TextBox ID="Email" runat="server"></asp:TextBox> 
    </div> 

      </div> 
     </form> 

CSS

.Userbox 
{ 

    width:50%; 
    height:100%; 
    border:1px solid #0BA84D; 
    padding:10px; 
    border-radius: 15px; 
    margin-left:10%; 
    align-self:center; 
} 

label.firstname { 
    width: 150px; 
    margin-right: 5px; 
    } 
label.lastname { 
    width: 150px; 
    } 
.EmailAddress { 
    float:left; 
} 
#UserNameDiv { 
    float:left; 
} 

Answer 1

對於一個好的格式，我更喜歡使用表結構這樣

<form id="form1" runat="server"> 
    <table> 
     <tr> 
     <td>Username</td> 
     <td> 
      <input type='text' /> 
     </td> 
     </tr> 
     <tr> 
      <td>First Name</td> 
      <td> 
       <input type='text' /> 
      </td> 
      <td>Last Name</td> 
      <td> 
       <input type='text' /> 
      </td> 
     </tr> 
     <tr> 
     <td>Email</td> 
     <td> 
      <input type='text' /> 
     </td> 
     </tr> 
    </table> 
</form> 

入住這JSFiddle

希望你有一個想法，在ASP來做到這一點。