將按鈕與基礎css中的文本輸入對齊

Question

如何獲得使用基礎CSS框架與文本輸入對齊的按鈕？我嘗試使用「內聯」類，它將文本輸入與標籤垂直對齊，但不能與按鈕一起使用。默認情況下，按鈕的頂部邊緣與文本輸入的頂部邊緣內嵌。

<form> 
    <div class="row"> 
     <div class="three columns"> 
      <input type="text" /> 
     </div> 
     <div class="two columns end"> 
     <button type="button" class="button inline">Do Something</button> 
    </div> 
    </div> 
</form> 

Answer 1

添加margin-top:-3px到按鈕

Answer 2

你有沒有嘗試設置你的div內聯塊與垂直對齊？

div{display:inline-block;vertical-align:middle;} 

的jsfiddle例如http://jsfiddle.net/v4ALL/1

Answer 3

我不知道這是否是同樣的問題，但是這可能會有幫助。我被卡在與基礎4的文本輸入字段一致，並發現輸入[type =「text」]寬度設置爲100％，並設置爲顯示：塊，所以輸入按鈕沒有空間適合內聯。

使用CSS鉤

input[type="text"].yourClassName 

如果忽略這些屬性

display:line; 
width:80%; 

，則該按鈕就能插槽右側。

希望有所幫助。

Answer 4

那麼這樣做的根本出路是簡單地把字段和按鈕在同一行

<div class="row"> 

在每場/按鈕列分配如下圖所示

<div class="row"> 
    <%= form_tag search_path, method: 'get' do %> 
    <div class="small-9 columns"> 
     <%= text_field_tag :query, params[:query], type: "search", class: "search-field" %> 
    </div> 
    <div class="small-3 columns"> 
     <%= submit_tag "Search", name: nil, class: "search-form tiny button" %> 
    </div> 
    <% end %> 
</div> 

好，類似的東西。用你的表格替換邏輯。