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.
37 Answers
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 type="text"><br /> <label for="email">Email Address:</label><input type="text"><br /> <label for="desc">Description of the input value:</label><input 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 type="text"></td></tr> <tr><td><label for="email">Email Address:</label></td><td><input type = "text"></td></tr> <tr><td><label for="desc">Description of the input value:</label></td><td><input type="text"></td></tr> </tbody> </table> </html> Using display table-cell/row will do the job without any width needed.
The html :
<html> <div> <div><label>Name:</label><input type="text"></div> <div><label>Email Address:</label><input type = "text"></div> <div><label>Description of the input value:</label><input type="text"></div> </div> </html> The Css :
label{ display: table-cell; text-align: right; } input { display: table-cell; } div.row{ display:table-row; } Set a width on the form element (which should exist in your example! ) and float (and clear) the input elements. Also, drop the br elements.
I know that this approach has been taken before, But I believe that using tables, the layout can be generated easily, Though this may not be the best practice.
HTML
<table> <tr><td>Name:</td><td><input type="text"/></td></tr> <tr><td>Age:</td><td><input type="text"/></td></tr> </table> <!--You can add the fields as you want--> CSS
td{ text-align:right; } in my case i always put these stuffs in a p tag like
<p> name : < input type=text /> </p>
and so on and then applying the css like
p { text-align:left; } p input { float:right; } You need to specify the width of the p tag.because the input tags will float all the way right.
This css will also affect the submit button. You need to override the rule for this tag.
I have just given width to Label and input type were aligned automatically.
input[type="text"] { width:100px; height:30px; border-radius:5px; background-color: lightblue; margin-left:2px; position:relative; } label{ position:relative; width:300px; border:2px dotted black; margin:20px; padding:5px; font-family:AR CENA; font-size:20px; }<label>First Name:</label><input type="text" name="fname"><br> <label>Last Name:</label><input type="text" name="lname"><br>
