html - 均匀对齐并响应下拉列表 HTML/CSS

Question

我使用“选择”标签在带有下拉列表的 HTML 上布置了几个选项。我想让它们具有响应性，以便在调整屏幕大小时，它们会慢慢均匀地堆叠在一起。现在，它有点 react 灵敏，但并没有均匀对齐。我想让所有的标题和下拉列表均匀对齐。我尝试这样做:

text-align: right;
float: left;
padding: 5px;
margin-top: 10px;

但这并不能解决问题。任何建议将不胜感激!

所以顶部应该有'家庭类型'和'地址'；第二行应该有“年龄范围”和“俱乐部”和“支付类型”；那么最后一行在全屏时应该有“开始日期”和“结束日期”。每个下拉列表应均匀对齐(例如，家庭类型下拉列表将与年龄范围和开始日期对齐；地址将与俱乐部和结束日期对齐；年龄范围将在末尾自行对齐)

JSFiddle:https://jsfiddle.net/q3h0qkhm/2/

Answer 1

按您预期的方式进行尝试。

    <div class="row">
  <div class="col-md-6 col-sm-6 col-xs-12">
    <div id="home" class="form-group"> Home Type:
      <select id="homeDDL" class="form-control">
      </select>
    </div>
  </div>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <div id="address" class="form-group"> Address:
      <select id="addressDDL" class="form-control">
      </select>
    </div>
  </div>
  <div class="col-md-4 col-sm-4 col-xs-12">
    <div id="age" class="form-group"> Age Range:
      <select id="ageDDL" class="form-control">
      </select>
    </div>
  </div>
  <div class="col-md-4 col-sm-4 col-xs-12">
    <div id="clubs" class="form-group"> Clubs:
      <select id="clubsDDL" class="form-control">
      </select>
    </div>
  </div>
  <div class="col-md-4 col-sm-4 col-xs-12">
    <div id="pay" class="form-group"> Payment Type:
      <select id="payDDL" class="form-control">
      </select>
    </div>
  </div>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <div id="startDate" class="form-group"> Start Date:
      <input type="text" id="StartDate" class="form-control" />
    </div>
  </div>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <div id="endDate" class="form-group"> End Date:
      <input type="text" id="EndDate" class="form-control" />
    </div>
  </div>
</div>