表单内的HTML标签和输入框未对齐

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:

<form>
    <div class="form-group">
        <label for="input">Please enter names, separated by space:</label>
            <div>
                <div class="col-xs-8">  
                    <input type="text" class="form-control" id="input" placeholder="Enter up to 10 names to search" ng-model="vm.searchRaw">
                </div>
                <div class="block-align-right">
                    <button class="btn btn-primary" style="width: 120px" ng-click="vm.search()" ng-disabled="vm.notEntered()">Search</button>
                </div>
            </div>
    </div>
</form>

The divs inside the form group is mainly to align the input box and the button to one line. Now the problem is: the left edge of the label and the left edge of the input box don't align; the input box shifts to the right a bit. Without using padding how can I fix this? Or is it built in for the form-group? Thanks!

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

Answer 2

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>

Answer 3

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