Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I align a label and a textarea?

Tags:

html

css

asp.net

My code ends up like:

             XXXXX              XXXXX Description: XXXXX 

I want:

             XXXXX Description: XXXXX              XXXXX 

"Description" sometimes spans multiple lines.

Code:

<p class="DataForm">     <label>Blah blah blah Description:</label>     <asp:TextBox ID="txtBlahblahblahDescription"                  runat="server"                  TextMode="MultiLine"                  Rows="8"                  Columns="50"></asp:TextBox><br/> </p> 

CSS:

.DataForm { } .DataForm label {     display: inline-block;     font-size: small;     margin-left: 5px;     width: 5%;     min-width: 60px; } .DataForm input {     margin-right: 9px;     display: inline-block;     width: 21%;     min-width: 30px; } 
like image 312
NibblyPig Avatar asked Dec 03 '09 11:12

NibblyPig


People also ask

How do you put a label and textbox on the same line in HTML?

Using table cell attribute in display property: Make a label inside a div and give the display property. To make the input element and span as equally placed use table-cell attribute in those tags. This attribute makes the element behaves a td element.

How do I use textarea labels?

The size of a text area is specified by the <cols> and <rows> attributes (or with CSS). The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted). The id attribute is needed to associate the text area with a label.

How do you align input boxes in HTML?

HTML | <input> align Attribute left: It sets the alignment of image to the left. it is a default value. right: It sets the alignment of image to the right. middle: It sets the alignment of image to the middle.

Can I use textarea in a form in HTML?

Yes you can use textarea tags outside of a form and they will display and allow text to be inserted and edited, but not being tied to a form their uses will likely be limited.


1 Answers

You need to put them both in some container element and then apply the alignment on it.

For example:

.formfield * {    vertical-align: middle;  }
<p class="formfield">    <label for="textarea">Label for textarea</label>    <textarea id="textarea" rows="5">Textarea</textarea>  </p>
like image 125
BalusC Avatar answered Sep 23 '22 02:09

BalusC