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

【问题标题】：How do I put a <label> over a textbox control in ASP.Net using CSS?如何使用 CSS 在 ASP.Net 中的文本框控件上放置 <label>？
【发布时间】：2017-05-20 02:12:35
【问题描述】：

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

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

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

这是我目前得到的：

谢谢。

【问题讨论】：

标签： html css asp.net

【解决方案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）。

希望有所帮助！

【讨论】：

【解决方案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>

【讨论】：