边距/填充右侧的问题不适用于移动设备的可滚动元素

Question

我正在尝试使用 ReactJS 和 CSS 构建一个在移动设备上显示的图标容器。我遇到的问题是，我想在容器的右侧和左侧应用一些空间以使其看起来更干净，但该空间不适用于容器的右侧：

左侧

右侧

我使用的结构如下：

<div className={isMobile ? "mcw-editor-icons-mobile" : "mcw-editor-icons"}>
    <div className={isMobile ? "mcw-editor-icons-wrapper-mobile" : "mcw-editor-icons-wrapper"}>
        // Multiple icons...
    </div>
</div>

.mcw-editor-icons-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: scroll;
    background: white;
    box-shadow: 0 2px 2px 2px lightgray;
    border-radius: 10px 10px 0 0;
    padding: 10px 0;
}

.mcw-editor-icons-wrapper-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.mcw-editor-icon {
    width: 35px;
    height: 35px;
    padding: 5px;
}

我尝试了多种方法，例如在类

margin: 0 20px

上添加

mcw-editor-icons-wrapper-mobile

或将

mcw-editor-icons-mobile

上的填充更改为

padding: 0 20px

，其问题与屏幕截图相同。

如何在右侧添加与左侧相同的间距？

Answer 1

使用clac函数 喜欢 ： 左边距：clac((100% - 300px)/2); 或者 提升：clac((100% - 300px)/2);