Question

我有一些使用“选择”标记在HTML上设置下拉列表的选项。我想让它们具有响应性，这样当屏幕调整大小时，它会慢慢叠加在一起。现在，它有点响应，但它没有均匀对齐。我想让所有标题和下拉列表均匀对齐。我试着这样做：

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

但这并没有解决问题。任何建议将不胜感激！

所以顶部应该有'home type'和'address';第二行应该有“年龄段”，“俱乐部”和“付款类型”;那么当它是全屏时，最后一行应该有'开始日期'和'结束日期'。每个下拉列表应均匀对齐（例如，家庭类型下拉列表将与年龄范围和开始日期一致;地址将与俱乐部和结束日期一致;年龄范围将在结束时自行对齐）

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>

Answer 2

尝试添加宽度：320px;对你的divs。这样可以整理所有东西。

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

Answer 3

遵循这种方式 -

<form class="form-horizontal">
  <div class="row">
    <div class="col-sm-4">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
    </div>
  </div>
</form>

Answer 4

我为每个选择标签添加了标签，并为此添加了CSS，因此所有标签的宽度都相同。

CSS：

.row label{width: 100px; float: left; margin-right: 10px;}

JSFiddle：https://jsfiddle.net/88sr5wfk/

Answer 5

试试这个，只需在.row

中添加高度和宽度

.row{
 width:100%;
 height:120px;
}

这使得家庭和地址保持在最高位置，然后是年龄，俱乐部，付款和最后开始日期＆amp;结束日期。要减少该阶段下方的间距，只需降低.row的高度

均匀对齐并对下拉列表HTML / CSS做出响应

5 个答案: