html - 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 中执行此操作。