Align HTML input fields by :
alignment, css, html, user-interface
Solution
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;
}
Problem
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.