html - 如何使用 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:

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

.form-group label{
   display: block;
}

<div class="form-group">
  <label>Student ID</label>
  <input type="text">
</div>
<div class="form-group">
  <label>Student ID</label>
  <input type="text">
</div>
<div class="form-group">
  <label>Student ID</label>
  <input type="text">
</div>

或者，您也可以使用 display: flex-box(有一个综合指南 here)。

希望对您有所帮助!