4

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

4 に答える 4

3

margin-top:-3pxボタンに追加

于 2013-02-25T00:28:02.103 に答える
1

それを行うための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>

まあ、そのようなもの。ロジックをフォームに置き換えます。

于 2015-06-13T14:20:54.203 に答える
0

divを垂直整列でインラインブロックに設定してみましたか？

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

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

于 2013-02-22T07:34:41.190 に答える
0

これが同じ問題であるかどうかはわかりませんが、これは役立つ可能性があります。Foundation 4のテキスト入力フィールドに沿ってボタンを取得するのに行き詰まり、input [type = "text"]の幅が100％に設定され、display：blockに設定されているため、入力ボタンにインラインでフィットします。

cssフックを使用する

input[type="text"].yourClassName

これらのプロパティをオーバーライドする場合

display:line;
width:80%;

その後、ボタンは右側に挿入できるようになります。

お役に立てば幸いです。

于 2014-04-27T18:18:08.363 に答える