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

【问题标题】：HTML label and input box inside form not alignHTML标签和表单内的输入框不对齐
【发布时间】：2016-02-28 22:07:54
【问题描述】：

group 对齐标签和输入框。这个想法是将标签和输入框放在不同的行中。代码 sn-ps 是这样的：

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

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

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

将类添加到标签。喜欢：

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

会解决你的问题。

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

查看下面的图片。

Working Fiddle

【讨论】：

【解决方案3】：

似乎您正在使用引导程序。只需修改<label> 行如下：

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

【讨论】：