造型行divs和自舉輸入組

我想在頁面底部製作一個固定的搜索欄。我想將搜索欄（行）分成三個部分 - 1）實際的搜索輸入框，（2）中間的div，它將成爲一個顯示框和（3）摺疊的高級菜單。造型行divs和自舉輸入組

我的第一個問題是我的列不出現在同一行。我有他們在3,6和3尺寸的所有屏幕尺寸破碎，但第二個div從未出現在第一個旁邊。你可以在這裏看到一個例子：broken div 我突出顯示了帶有白色邊框的div，以便於查看。（這也是這種情況，無論我是否只有文本輸入或帶有按鈕的輸入 - 我後來選擇使用它）

我的第二個問題是，雖然試圖設置欄的佈局，但我的搜索框當我在Mozilla中測試它時，不會移動到正確的位置。它works in我的小提琴測試，但這完全不是它在我的瀏覽器中看起來像什麼。我已經嘗試了許多通常給出的解決方案，但目前爲止沒有任何工作。

<div id="card-search-controls" class="row"> 
<div class="input-group col-md-3 col-sm-3 col-lg-3"> 
    <input type="text" id="searchbox" class="form-control" value="Search for..." ng-model="searchFilterInput" autofocus> 
    <span class="input-group-btn"><button class="btn btn-default" type="button">+</button></span> 
</div> 
<div class="search-results col-md-6 col-sm-6 col-lg-6">TEST TEXT</div> 
<div class="adv-menu col-md-3 col-sm-3 col-lg-3">####</div> 
</div>

編輯顯示的CSS

#card-search-controls{ 
height: 50px; 
margin-left: 0px; 
position: fixed; 
bottom: 0; 
right: 0; 
left: 0; 
background: rgba(6,25,51, 0.8); 
z-index: 1; 
display: flex; 
} 
.input-group{ 
    margin-top: 10px; 
    margin-bottom: 10px; 
    height: 20px; 
    margin-left: 0px; 
} 

#card-search-controls div{ 
border: 1px solid white; 
} 

.search-results{ 
margin-top: 10px; 
}

來源

2015-12-23 Thumper

你的第一個問題從DIV – pTi

刪除輸入組類我不明白的第二issue..but我同時測試Firefox和Chrome，做工精良檢查下面的代碼片段.. – pTi

哦，太好了！非常感謝。你能聯繫我解釋爲什麼它在窗體中工作但不是div嗎？另外我的第二個問題的意思是，例如，如果我使底部搜索欄50px高度和搜索框30px例如，然後嘗試在頂部和底部放置10px頁邊距，搜索欄始終位於屏幕底部，否事關我的事。 – Thumper

請檢查此code..I已經添加了輸入組成單獨的形式標記和包裹輸入域。

<div class="container"> 
    <div id="card-search-controls" class="row"> 
    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-3"> 
     <form class="input-group"> 
     <input type="text" id="searchbox" class="form-control" value="Search for..." ng-model="searchFilterInput" autofocus="" />  
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">+</button> 
     </span> 
     </form> 

    </div> 
    <div class="search-results col-md-6 col-sm-6 col-lg-6 col-xs-6">TEST TEXT</div> 
    <div class="adv-menu col-md-3 col-sm-3 col-lg-3 col-xs-3">######</div> 
    </div> 
</div>

來源

2015-12-23 03:49:41 pTi

造型行divs和自舉輸入組

回答

相關問題