樣式內聯不適用於所有元素

這是我的部分引導代碼。該表格可以讓你按名字和姓氏搜查：樣式內聯不適用於所有元素

<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

樣式內聯不適用於所有元素

回答

相關問題