2016-12-04 7 views
0

http://materializecss.com/cards.htmlの最初の基本カードの例を出発点として使用しています。カードアクションdivには、美しくレンダリングされる2つのリンクが含まれています。MaterializeCSSカードアクションは、フォームでボタンではなくリンクのみを調整できます

ここで、リンクを開くだけでなく操作を実行する新しいカードアクションを追加します。これはおそらくタグ付きの標準的なリンクを使って行うこともできますが、私はRailsを標準的な方法で使用しているので、このアクションはそのフォームの周りのフォームのボタンになります。それは次のようになります。私はボタンがうまくカードの下部に1行の2つの既存のリンク、と整列されることを期待しているだろう

<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リンクタグとともにフォームとボタンを1行に揃えるにはどうすればよいですか?

UPDATE:あなたは自分のフォームタグにdisplay: inlineを追加する必要がhttps://jsfiddle.net/hendrikbeck/zq1pv3y6/

答えて

2

:ここJSFiddleは、上記のコードです。

更新されたJSFiddle:https://jsfiddle.net/zq1pv3y6/2/

+0

Wohooを参照してください。それは簡単でした。それは実際にMaterializeCSSの問題ではありません。またはそれは? .card-actionクラスにこのスタイルを追加して、フォームが正しくレンダリングされるようにすることができます。とにかく、あなたの助けをありがとう、それは完全に働いた! – hendrikbeck

関連する問題