使用右拉

Question

我正在尝试将这些标签放在选择下拉列表旁边。我正在使用右拉对齐所有这些项目。

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

第二对夫妇甚至没有与右边对齐。我怎么能解决这个问题？

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-horizontal。然后，我为col-分配了label课程，在.pull-right和select上使用label，然后在HTML中重新排序了这两个元素所以他们会按照你想要的顺序显示在屏幕上。

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

Answer 2

大多数布局＆amp;使用Flexbox可以解决对齐问题。

尝试

.form-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Answer 3

尝试

div{
  min-width: 300px;
}

label {
  display: inline-block;
  width: auto;
  text-align: right;
  float: right;
  padding: 7px 14px;
  max-width: 100px;
}
select{
  display: inline-block;
  float: right;
  max-width: 200px;
}

检查一下，看看这是不是你想要它。 https://jsfiddle.net/r70xa3jz