MaterializeCSS card-action может выровнять ссылки, а не кнопки с формами

Question

Я использую первый пример базовой карты от http://materializecss.com/cards.html в качестве отправной точки. Экран card-action содержит две ссылки, которые выглядят красиво.

Теперь я хочу добавить новое действие карты, которое не просто открывает ссылку, но выполняет действие. Это, вероятно, можно было бы сделать с помощью стандартной ссылки с тегом, но, поскольку я использую Rails, мой стандартный способ заключается в том, что это действие становится кнопкой с формой вокруг нее. Похоже, это сейчас:

<div class="row"> 
    <div class="col s12 m6"> 
     <div class="card blue-grey darken-1"> 
     <div class="card-content white-text"> 
      <span class="card-title">Card Title</span> 
      <p>I am a very simple card. I am good at containing small bits of information. 
      I am convenient because I require little markup to use effectively.</p> 
     </div> 
     <div class="card-action"> 
      <a href="#">This is a link</a> 
      <a href="#">This is a link</a> 
      <form> 
      <a class="waves-effect waves-light btn">button</a> 
      </form>    
     </div> 
     </div> 
    </div> 
    </div> 

я ожидал бы, что кнопка хорошо выровнена с двумя существующих связями, в одной строке в нижней части карты. Но на самом деле происходит то, что кнопка появляется в строке ниже.

Как я могу выровнять кнопку с формой вместе со стандартными тегами HTML-ссылок в одной строке?

UPDATE: вот JSFiddle с указанным кодом: https://jsfiddle.net/hendrikbeck/zq1pv3y6/

Answer 1

Вам просто нужно добавить display: inline к вашей форме тега.

Смотрите обновленный JSFiddle: https://jsfiddle.net/zq1pv3y6/2/