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

并为类＆＃39; form-group＆＃39;：

应用以下CSS

＆＃13;

＆＃13;

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

.form-group label{
   display: block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，您也可以使用display：flex-box（这是一本综合指南here）。

希望有所帮助！

Answer 2

将输入标记放在label标记内（并添加换行符<br>）：

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