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

好吧，Foundation 的做法就是将字段和按钮放在同一行

   <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>

嗯，类似的东西。用您的表格替换逻辑。

Answer 3

您是否尝试过将您的 div 设置为具有垂直对齐的内联块？

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

jsFiddle 示例http://jsfiddle.net/v4ALL/1

Answer 4

我不确定这是否是同一个问题，但这可能会有所帮助。我被困在使用基础 4 的文本输入字段中获取按钮，发现 input[type="text"] 宽度设置为 100% 并设置为 display:block，因此输入按钮没有空间适合内联。

使用 CSS 钩子

input[type="text"].yourClassName

如果您覆盖这些属性

display:line;
width:80%;

然后按钮将能够插入右侧。

希望有帮助。