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

Question

组对齐标签和输入框。我们的想法是将标签和输入框放在不同的行中。代码片段如下：

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

表单组内的div主要是将输入框和按钮对齐到一行。现在的问题是：标签的左边缘和输入框的左边缘没有对齐;输入框向右移动一点。不使用填充，我该如何解决这个问题？或者它是否为表单组内置？谢谢！

Answer 1

使用此类型

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

好像你正在使用bootstrap。只需修改<label>行，如下所示：

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

Answer 3

将类添加到标签。像：

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

将解决您的问题。

因为bootstrap类会添加padding-left:15px。

检查下面的图片。

<强> Working Fiddle