将按钮与基础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> 

好，类似的东西。用你的表格替换逻辑。