HTML Label And Input Box Inside Form Not Align

Question

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.

Baca Juga

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>

Free Interactive Html5 Tutorial

HTML Label And Input Box Inside Form Not Align

Solution 1:

Solution 2:

Solution 3:

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