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 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的文本输入字段一致，并发现输入[type =“text”]宽度设置为100％并设置为display：block，因此输入按钮没有空间适合内联。

使用css hook

input[type="text"].yourClassName

如果您覆盖这些属性

display:line;
width:80%;

然后按钮就能插入右侧。

希望有所帮助。

将按钮对齐到基础css中的文本输入

4 个答案: