我有一个TemplateList组件，它包含一个卡片列表。它们显示在一些文本和按钮的中间。我希望我的设计看起来像这样：

“我的卡片模板”容器应始终从中间开始，并向右滚动。

我的模板列表如下所示：

<代码><；DIV类名称={styles.scrollContainer}>；{templates.map（（item）=>；(<；模板卡title={item.title}description={item.description}IMG={item.imgurl}ClassNameToAdd={styles.cardContainer}key={item.ID}OnSelectCard={（）=>；{handleSelect（item.ID）；}}OnDeselectCard={（）=>；{handleDeselect（item.ID）；}}/>；))}<；/DIV>；

我的卷轴容器CSS：

<代码>.ScrollContainer{Overflow-X：滚动；Overflow-Y：隐藏；空白：nowrap；填料-顶部：3Vmin；垫底：5Vmin；宽度：100VW；/*IOS&；安卓*/-webkit-overflow-scrolling：触摸；overscroll-behavior-y：包含；}.scrollContainer：-webkit-scrollBar{显示：无；}

所做的是在第一张子卡上添加一个左边距，以便将所有卡片推到右边，但在测试响应性时，它并不总是位于同一位置。

<代码>.CardContainer{显示：inline-block；}.CardContainer：最后一个子级{右边距：10VW；}.cardContainer：第一个子级{左边距：37VW；}

些什么？

顺晟科技：

如果你的卡片有固定的宽度，比如说300px，你可以使用 <div className={styles.scrollContainer}> {templates.map((item) => ( <TemplateCard title={item.title} description={item.description} img={item.imgURL} classNameToAdd={styles.cardContainer} key={item.id} onSelectCard={() => { handleSelect(item.id); }} onDeselectCard={() => { handleDeselect(item.id); }} /> ))} </div> 来计算边距：

.scrollContainer {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

    padding-top: 3vmin;
    padding-bottom: 5vmin;

    width: 100vw;

    /* IOS & Android */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.scrollContainer::-webkit-scrollbar {
    display: none;
}

因此，边距将是[视口宽度的50%]