如何使用 CSS 将 <label> 放在 ASP.Net 中的文本框控件上？

Question

我正在尝试创建一行，其中包含一些带有标签的文本框，如下所示：

如何将标签与文本框对齐？

        <label>Student ID</label>
        <asp:TextBox ID="txtStudentID" runat="server"></asp:TextBox>
        <label>Student Last Name</label>
        <asp:TextBox ID="txtStuLastName" runat="server"></asp:TextBox>
        <label>Student First Name</label>
        <asp:TextBox ID="txtStuFirstName" runat="server"></asp:TextBox>

这是我当前的 CSS。

.boxround label {
    display: block;        
    float: left;
}

这是我目前得到的：

谢谢你。

Answer 1

如果将每个组包含在一个 div 中会更好。

例如：

<div class="form-group">
   <label>Student ID</label>
   <asp:TextBox ID="txtStudentID" runat="server"></asp:TextBox>
</div>

并为类“form-group”应用以下 CSS：

<div class="form-group">
   <label>Student ID</label>
   <asp:TextBox ID="txtStudentID" runat="server"></asp:TextBox>
</div>

.form-group{
   display: inline-block;
   margin-right: 10px;
   float:left;
}

.form-group label{
   display: block;
}

或者，您也可以利用显示：柔性盒（有一个全面的指南这里）。

希望有所帮助！