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

这是我的部分引导代码。该表格可以让你按名字和姓氏搜查：样式内联不适用于所有元素

<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，则不会发生这种情况。但是，我确实需要它来显示页面右侧的控件。

我想知道是否有一种方法可以使设置的所有控件始终如一地工作。问候。

来源

2015-03-31 Peter

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

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

来源

2015-03-31 06:47:46 Pugazh

谢谢你的帮助。我不确定我是如何使用上述情况的选择器。请指导。 – Peter 2015-03-31 07:22:04

做到这一点是使用*选择的最佳方式中的所有元素，这说的样式将被应用到div中的所有元素类形式的内联

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

来源

2015-03-31 06:59:18

设置标签上的左对齐风格以及按钮解决我的问题：

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

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

来源

2015-04-01 17:20:25 Peter

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

回答

相关问题