Question

我将此表单放入类容器的div中，我想知道为什么标签在输入字段旁边对齐水平。我应该在css文件中添加什么？

  <form class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="pwd">Password:</label>
        <div class="col-sm-10"> 
          <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
      </div>
    </form>

Answer 1

为form-group使用flexbox是一种选择。这个布局是你需要的吗？

＆＃13;

.form-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 40%;
}

.form-group:not(:last-child) {
  margin-bottom: .5em;
}

＆＃13;

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
</form>

＆＃13;

Answer 2

它是因为您的标签的类别为-sm-2，其中一个-sm-10，且两者都显示为inline。

你需要添加你的CSS：

.control-label  {display: block}
.form-group div {display: block}

Answer 3

试试这个：

.form-group {
  display: table-row;
}

.col-sm-10 ,label {
  display: table-cell;
  padding: 5px;
}

.form-group {
  display: table-row;
}

.col-sm-10 ,label {
  display: table-cell;
  padding: 5px;
}

  <form class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="pwd">Password:</label>
        <div class="col-sm-10"> 
          <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
      </div>
    </form>

元素没有对齐

3 个答案: