表单中的HTML标签和输入框不对齐 [英] HTML label and input box inside form not align

问题描述

将一个标签和一个输入框对齐。这个想法是将标签和输入框放在不同的行中。代码片段如下所示：

 < form> 
< div class =form-group> 
< label for =input>请输入名称，以空格分隔：< / label> 
< div> 
< div class =col-xs-8> 
< input type =textclass =form-controlid =inputplaceholder =输入最多10个名称进行搜索ng-model =vm.searchRaw> 
< / div> 
< div class =block-align-right> 
< button class =btn btn-primarystyle =width：120pxng-click =vm.search（）ng-disabled =vm.notEntered（）> Search< / button> ; 
< / div> 
< / div> 
< / div> 
< / form> 
  

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

解决方案

使用此类型

Working JS Fiddle

HTML：

 < div> 
< label>名称：< / label>< input type =text> 
< label>电子邮件地址：< / label>< input type =text> 
< label>输入值的描述：< / 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; 
} 
  

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!

解决方案

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

这篇关于表单中的HTML标签和输入框不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！