html - 将列表元素与其中的相对 div 水平对齐

Question

在过去的两个小时里，我一直在尝试水平对齐卡片元素的无序列表。

这是我的 HTML：

  <div id="hand-list">
    <ul>
      <li>
        <card></card>
      </li>
      <li>
        <card></card>
      </li>
    </ul>
  </div>

这是我的 CSS：

div#hand-list ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-width: 170px;
    float: left;
}

div#hand-list ul li {
    display: inline-block;
}

.card {
    position: relative;
    background: #e3e3e3;
    border-radius: 5px;
    cursor: pointer;
    width: 150px;
    height: 90px;
    box-shadow: 0 1px 1px;
}

我究竟做错了什么？我只是让它们一直垂直堆叠？

在基本层面上，一张卡片如下（这只是 AngularJS 的一部分）：

<div class="card" shift>
    <div class="card-header">
        <h4>{{ user.firstName | limitTo:10 }} {{ user.lastName | limitTo:1 }}.</h4>
    </div>
    <div class="card-body">
    </div>
    <div class="card-footer">
        {{ user.label }}
    </div>
</div>