Skip to content Skip to sidebar Skip to footer
Home / Css / Html

HTML Label And Input Box Inside Form Not Align

Post a Comment
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.

enter image description here

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>

You may like these posts

Post a Comment for "HTML Label And Input Box Inside Form Not Align"