样式内联不适用于所有元素
问题描述:
这是我的部分引导代码。该表格可以让你按名字和姓氏搜查:样式内联不适用于所有元素
<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
.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>
现在,当视口足够宽时,视图端口右侧的所有元素都显示在一行中。当视口的宽度减小时,所有控件垂直显示为左对齐。
谢谢你的帮助。我不确定我是如何使用上述情况的选择器。请指导。 – Peter 2015-03-31 07:22:04