html - 将选择旁边的标签与右拉对齐

Question

我试图将这些标签放在选择下拉菜单旁边。我使用 pull-right 将所有这些元素向右对齐。

使用我的代码，第一个标签/选择对向右对齐，但标签位于选择的顶部。

第二对甚至没有右对齐。我该如何解决这个问题？

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="form-group pull-right">
  <label for="tipo" class="control-label">Tipo</label>
  <select name="tipo" id="tipoProveedor" style="width: 344px" class="form-control">
    <option value="todos">Todos</option>
  </select>
</div>


<div class="form-group pull-right">
  <label for="idFamilia" class="control-label">Familia</label>
  <select name="idFamilia" id="idFamilia" style="width: 344px" class="form-control">
    <option value="0">Seleccione</option>
  </select>
</div>

Answer 1

您想添加一个form 并使用.form-horizo​​ntal。然后我为你的 label 分配了一个 col- 类，在 select 上使用了 .pull-right 和label，然后在您的 HTML 中重新排列这 2 个元素，以便它们按您希望的顺序显示在屏幕上。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <form class="form-horizontal">
      <div class="form-group">
        <select name="tipo" id="tipoProveedor" style="width: 344px" class="form-control pull-right">
    <option value="todos">Todos</option>
  </select>
        <label for="tipo" class="control-label col-sm-2 pull-right">Tipo</label>

      </div>
      <div class="form-group">
        <select name="idFamilia" id="idFamilia" style="width: 344px" class="form-control pull-right">
    <option value="0">Seleccione</option>
  </select>
        <label for="idFamilia" class="control-label col-sm-2 pull-right">Familia</label>

      </div>
    </form>
  </div>
</div>