выровнять кнопку для ввода текста в фундамент css

Question

Как получить кнопку для выравнивания с помощью ввода текста с использованием основы css? Я попытался использовать класс «inline», который вертикально выравнивает метку с текстовым вводом, но она не работает с кнопкой. По умолчанию кажется, что верхний край кнопки встроен в верхний край ввода текста.

<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{display:inline-block;vertical-align:middle;} 

jsFiddle пример http://jsfiddle.net/v4ALL/1

Answer 3

я не уверен, если это та же проблема, но это может помочь. Я застрял, получив кнопки в соответствии с полями ввода текста с основанием 4 и обнаружил, что ширина ввода [type = "text"] установлена ​​на 100% и установлена ​​на отображение: block, поэтому кнопки ввода не имеют места для встраиваемый.

с помощью 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> 

Ну, что-то вроде того. Замените логику своими формами.