基金會 - 試圖將搜索欄和搜索按鈕相互對齊

因此，我正在與基金會合作，並試圖將搜索欄和搜索按鈕對齊。我已經嘗試將它們放入一個容器中，並分別將它們左右浮動，但這不起作用。基金會 - 試圖將搜索欄和搜索按鈕相互對齊

這是它看起來像現在：https://gyazo.com/59a22c3c9cd849b1dd9fec6bb9df6bd5

這是HTML：

<div class="top-bar-right"> 
    <ul class="menu"> 
    <form method="GET" action=""> 

    <li><input type="text" align="middle" name="search" value="{{ request.GET.search }}"placeholder="Search by Title"></input></li> 
    <li><button type="button input" class="button">Search</button></li> 

    </form> 

</ul> 
</div>

，但我希望他們能並排。

感謝您的幫助！

編輯：忘了添加我的html！

來源

2017-03-04 Will Treston

*問題尋求調試幫助（「？爲什麼不是這個代碼工作」）必須包括所期望的行爲，一個具體問題或錯誤和在問題本身中重現它所需的最短代碼。沒有明確問題陳述的問題對其他讀者無益。請參閱：如何創建一個[mcve]。* –

@MichaelCoker添加了代碼，忘記這麼做了，當我創建post1 –

一種方式將
因此，使用跨度將幫助你讓你的內聯元素使用跨度，
李是塊元素。

複製並保存下面的代碼爲HTML文件，例如： - demo.html
並打開它的瀏覽器。

試試這個 -

<html> 
    <body> 
     <div class="top-bar-right"> 
      <form method="GET" action=""> 
       <span> 
        <input type="text" align="middle" name="search" value="{{ request.GET.search }}"placeholder="Search by Title"> 
        </input> 
       </span> 
       <span> 
        <button type="button input" class="button"> 
         Search 
        </button> 
       </span> 
      </form> 
     </div> 
    </body> 
</html>

注 - 我已經刪除您UL標籤，它有一個CSS類「菜單」，如果你的代碼使用它的東西不知道。

來源

2017-03-04 18:28:48

這沒有奏效，它以相同的效果結束 –

恩，對我來說工作正常，你是否複製了我已正確發佈完整的代碼？ –

默認情況下，每個行項目（li）都會填充其容器的寬度。要將它們並排顯示，您應該使用display：inline-block on line items。

來源

2017-03-04 19:16:36 Ffion

你可以用基金會的inline-labels-and-buttons做到這一點：

<div class="top-bar-right"> 
    <ul class="menu"> 
    <li> 
     <form method="GET" action=""> 
     <div class="input-group"> 
      <input class="input-group-field" type="text" name="search" value="{{ request.GET.search }} " placeholder="Search by Title"> 
      <div class="input-group-button"> 
      <input type="submit" class="button" value="Submit"> 
      </div> 
     </div> 
     </form> 
    </li> 
    </ul> 
</div>

JSFiddle example

來源

2017-03-04 20:27:14 tymothytym

基金會 - 試圖將搜索欄和搜索按鈕相互對齊

回答

相關問題