Menu
I have a HTML form like:
<html> Name:<input type="text"/></br> Email Address:<input type="text"/></br> Description of the input value:<input type="text"/></br> </html> Now the labels all begin in the same column but the text boxes are beginning in different positions as per the label's text length.
Is there a way to align the input fields such that, all the ":" and the text boxes, will begin in the same position, and the preceding text will be right aligned until the ":" ?
I am okay with using CSS if that can help achieving this.
756
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.
We specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to "inline-block" and give a fixed width. After that, set the text-align property to "right", and the labels will be aligned with the inputs on the right side.
Working JS Fiddle
HTML:
<div> <label>Name:</label><input type="text"> <label>Email Address:</label><input type = "text"> <label>Description of the input value:</label><input type="text"> </div> CSS:
label{ display: inline-block; float: left; clear: left; width: 250px; text-align: right; } input { display: inline-block; float: left; } You could use a label (see JsFiddle)
CSS
label { display: inline-block; width: 210px; text-align: right; } HTML
<html> <label for="name">Name:</label><input id="name" type="text"><br /> <label for="email">Email Address:</label><input id="email" type="text"><br /> <label for="desc">Description of the input value:</label><input id="desc" type="text"><br /> </html> Or you could use those labels in a table (JsFiddle)
<html> <table> <tbody> <tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr> <tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr> <tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr> </tbody> </table> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
