水平顯示卡列表，帶有角度和MaterializeCSS的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

爲L1標籤使用浮動到左

li { 
float: left; 
} 

addaly for ul add list-style-type：none;

Answer 2

問題是您的重複是在訂單項上。你實際上告訴它你想要垂直。將您的重複移動到span標籤，您可能還需要添加inline-block的顯示並在您的跨度上設置寬度。試試這個：

<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。讓我知道這是不是你想要做的。