Question

这是我的部分引导代码。该表单允许您按名字和姓氏搜索某人：

<div style="text-align:right">
  <div class="form-inline">
    <div class="form-group">
        <label for="Search">Search</label>
    </div>
    <div class="form-group">
            <input class="form-control text-box single-line" id="FirstName" name="FirstName" placeholder="First Name" type="text" value="" />
    </div>

    <div class="form-group">
            <input class="form-control text-box single-line" id="LastName" name="LastName" placeholder="Last Name" type="text" value="" />
    </div>

    <div class="form-group">
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>
</div>

最顶层的div帮助在网页右侧显示内部控件集（根据需要）。

当视口足够宽时，所有控件都按原样显示在一行中。

但是，当视口宽度减小时，文本框控件会垂直排列（按预期方式），但“搜索”标签和“搜索”按钮会保留在页面右侧。

为什么有些元素垂直对齐而有些元素不对齐？

如果删除最顶层的div，则不会发生这种情况。但是，我确实需要它来显示页面右侧的控件。

我想知道是否有办法使集合中的所有控件始终如一。问候。

Answer 1

使用*选择器选择div form-inline

中的所有元素

.form-inline *
{
    /* Desired style here */
}

Answer 2

最好的方法是使用*选择器，这表示样式将应用于div类form-inline中的所有元素

.form-inline *
{
  /* Place your styling stuff here */
}

Answer 3

在标签上设置左对齐样式以及按钮解决了我的问题：

<div class="form-group" style="text-align:right">
    <label for="Search">Search</label>
</div>

现在，当视口足够宽时，所有元素都显示在视口右侧的一行中。当视口宽度减小时，所有控件都垂直显示为左对齐。

样式表格内联不适用于所有元素

3 个答案: