Html 样式表单内联并不适用于所有元素

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

<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

，则不会发生这种情况。但是，我确实需要它来显示页面右侧的控件

---

我想知道是否有一种方法可以使集合中的所有控件一致地工作。注意。

使用

*

选择器选择div

表单内联中的所有元素

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

---

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

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

---

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

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

搜寻

---

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

谢谢您的帮助。我不确定在上述情况下如何正确使用选择器。请导游。