Html Label And Input Box Inside Form Not Align

group to align a label and an input box. The idea is to put the label and the input box in different lines. The code snippets are like:

Solution 1:

Use this type

Working JS Fiddle

HTML:

<div><label>Name:</label><inputtype="text"><label>Email Address:</label><inputtype = "text"><label>Description of the input value:</label><inputtype="text"></div>

CSS:

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}
input {
  display: inline-block;
  float: left;
}

Solution 2:

Add class to label. like:

<label class="col-xs-10"for="input">Please enter names, separated by space:</label>

Will solve your issue.

Because bootstrap class will add padding-left:15px.

Check image below.

Working Fiddle

Solution 3:

Seems like you are using bootstrap. Just modify the <label> line as follows:

<label for="input"class="col-xs-12">Please enter names, separated by space:</label>

Share

You may like these posts

• 
  I Have A Basic Problem Understanding CSS Positioning
• 
  Position Children Div Above Parent Div
• 
  Add Extra Divs To The Dom Jquery ( Toogle Click More Function)
• 
  How To Center Checkbox Vertically In A Table-cell?