css - 使项目列表可水平滚动

Question

我的 Angular Material 垫芯片列表面临一个问题。

我有一个垫子列表，里面装满了垫子，我想将它们添加到一行中，如果项目多于显示器可以显示的数量，我希望该区域可以水平滚动。

这是我的案例示例：https ://stackblitz.com/edit/angular-sr6pkk?file=src%2Fapp%2Fchips-input-example.html

谢谢。

标签： cssangular

Answer 1

将下面的 css 代码添加到 styles.scss 以使芯片列表可水平滚动

.mat-chip-list-wrapper {
    /* make all item stay in one row, add !important to override default value: wrap */
    flex-wrap: nowrap !important;
    overflow-x: auto; /* make list scroll when overflow */
}