在基础CSS中对齐文本输入按钮 这样做的基础方法就是简单地把字段和按钮放在同一行 <div class="row">

您是否尝试过使用垂直对齐将div设置为内联块

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

---

jsiddle示例

将

页边距顶部：-3px

添加到按钮

我不确定这是否是相同的问题，但这可能会有所帮助。我被困在与基础4的文本输入字段的按钮，发现输入[type =“text”]宽度设置为100%，并设置为显示：块，因此输入按钮没有空间适合内联。

使用css钩子

input[type="text"].yourClassName

如果覆盖这些属性

display:line;
width:80%;

然后按钮就可以插在右边了

---

<>希望有帮助。

< p>这样做的基础方法就是简单地把字段和按钮放在同一行

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

---

嗯，差不多吧。用表单替换逻辑。

使用.two、.three{float:left}或.columns{float:left}