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><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;
}

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

• 
  Loading Animation Using Jquery To Display Inside A Particular Div
• 
  Trying To Update Css Variable Using Javascript Addeventlistener, But It Is Working Only Once
• 
  How To Create An Unordered List Inside An Unordered List In A List Menu?
• 
  Css Floats - Content Falling Down In Ie6