How do I put a <label> over a textbox control in ASP.Net using CSS?

Question

I'm trying to create one row with some text boxes with label's over them like this:

How do I align the labels up with the text boxes?

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

Here's my current CSS.

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

This is what I current get:

Thank you.

Answer 1

It would be better if you enclosed each group inside a div.

For example:

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

And apply the following CSS for class 'form-group':

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

Alternatively, you could also make use of display: flex-box (there's a comprehensive guide here).

Hope that helped!