水平滚动列表显示HTML CSS（当前垂直显示滚动）

Question

我刚刚开始使用HTML＆amp;带有角度和角度的CSS我一直试图实现这个滚动列表一段时间，但不知道如何实现它。

我可以使用li和ul元素实现它，但是对于这个我正在使用* ngFor进行迭代的具体示例，我不知道该怎么做..

我希望实现这样的目标：

目前，我的应用程序显示如下:(具有垂直滚动功能）

如何让我的航班水平显示在滚动列表中？ 我的代码：

飞行观察者HTML：

<h3>Flights </h3>
<div class= "grid grid-pad">
    <a *ngFor="let flight of flights" class="col-1-4">
        <div class ="module flight">
            <h4>{{flight.number}}</h4>
        </div>
    </a>
</div>

飞行viewer.css：

h3 {
    text-align: center; margin-bottom: 0;
}
h4 {
    position: relative;
}


.module {
    padding: 20px;
    text-align: center;
    color: #eee;
    max-height: 120px;
    min-width: 120px;
    background-color: #607D8B;
    border-radius: 2px;
}
.module:hover {
    background-color: #EEE;
    cursor: pointer;
    color: #607d8b;
}

任何帮助/指示都将不胜感激！

编辑：已解决

由于