CODEWITHSUNDEEP
htmlcssasp.net
JM1
JM1

Reputation: 1715

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

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

enter image description here

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:

enter image description here

Thank you.

Upvotes: 4

Views: 3883

Answers (2)

demitinay
demitinay

Reputation: 86

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!

Upvotes: 5

Todor Simeonov
Todor Simeonov

Reputation: 806

Put the input tag inside the label tag (and add a line break <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>

Upvotes: 0

Related Questions