カードリストを水平に表示する、角度/マテリアライズCSSを持つHTML/CSS

Question

ng-repeat指令を使用してカスタムカードのリストを表示したいが、それは垂直に表示し続ける。

<style> 
    li{ 
     display: inline 
    } 
    </style> 
<div ng-init="names=['Jani','Hege','Kai']"> 
    <ul > 
    <li ng-repeat="x in names"> 
    <div class="row"> 
     <div class="col s12 m2 20 " > 
      <div class="card blue-grey darken-1"> 
      <div class="card-content white-text"> 
       <span class="card-title" id="dani">{{x}}</span> 
       <p id="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> 
      </div> 
      </div> 
     </div> 
     </div> 
    </li> 
    </ul> 

</div> 

私は間違っていますか？

UPDATE：

display: inline-flex; 

は、問題を修正しますが、オブジェクトを同じ行に次々に置きます。私は4つのオブジェクトを言うことができた後、次の行に行きたい、どのように私はこれを設定することができますか？

アップデート2：ここ は私が達成したいものです。

ので、3カードが増加する:)

Answer 1

のliタグの使用のために

li { 
float: left; 
} 

を左に浮動水平ラインを表示した後、 ulには

が追加されました。list-style-type：none;

Answer 2

問題は、繰り返しは広告申込情報にあることです。文字通り、それを縦にしたいと言っています。リピートをspanタグに移動し、インラインブロックの表示を追加し、スパンに幅を設定する必要があります。試してみてください：

<div ng-init="names=['Jani','Hege','Kai']"> 
    <ul > 
    <li> 
    <div ng-init="names=['Jani','Hege','Kai']"> 
    <ul > 
    <li> 
    <div class="row"> 
     <div class="col s12 m2 20 " > 
      <div class="card blue-grey darken-1"> 
      <div class="card-content white-text"> 
       <span style="display:inline-block; width:100px" ng-repeat="x in names" class="card-title" id="dani">{{x}}<br> 
       <span style="display:inline-block" id="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.</span></span> 

      </div> 
      <div class="card-action"> 
       <a href="#">This is a link</a> 
      </div> 
      </div> 
     </div> 
     </div> 
    </li> 
    </ul> 

</div> 

ここにはPlunkerです。これがあなたがしようとしていたものでないかどうか私に教えてください。