javascript - 水平显示卡片列表，带有 Angular 和 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>

我做错了什么？

更新:

display: inline-flex; 

解决了这个问题，但将对象一个接一个地放在同一行上。我想在比方说 4 个对象之后转到下一行，那么我该如何设置呢？

更新 2:这是我想要实现的目标:

所以在 3 张卡片显示水平线后增加:)

Answer 1

li 标签使用向左浮动

li {
 float: left;
}

另外为 ul 添加 list-style-type:none;