CSS填充不适用于反应js中的div

Question

我在 react js 中有一个这样的 div，它呈现多个 div 并溢出：

 <div
      style={{
        display: "flex",
        padding: "1em 0.7em",
        overflowX: "auto",
        width: "100%",
        direction: "rtl",
        background: "#ef394e"
      }}
    >
      {Array.from(Array(10).keys()).map((each, index) => (
        <div
          key={index}
          className="swiper-slide"
          style={{
            background: "white",
            borderRadius: "10px",
            width: "270px",
            margin: "0 .4em"
          }}
        >
          <div style={{ padding: "2em 6em" }}>Hello</div>
        </div>
      ))}
    </div>

但由于某种原因，填充应用于容器的右侧而不是左侧，这里有一些图片：

如何将填充应用到数组项的容器 div 的左侧和右侧？

Answer 1

这是因为你的div 宽度比身体大， 结果你的身体也有卷轴。 尝试在父组件中添加boxSizing: border-box，body 滚动就会消失。

const App = () => {
 return (
   <div
     style={{
       display: "flex",
       padding: "1em 0em",
       overflowX: "auto",
       width: "100%",
       direction: "rtl",
       background: "#ef394e",
       boxSizing: "border-box" // <--- this line
     }}
   >
   ...
   </div>
 );
};

Answer 2

这是 div 上的填充。它太少了，而且利润也很大。

import React from "react";

const App = () => {
  return (
    <div
      style={{
        display: "flex",
        padding: "1em 0em",
        overflowX: "auto",
        width: "100%",
        direction: "rtl",
        background: "#ef394e"
      }}
    >
      {Array.from(Array(10).keys()).map((each, index) => (
        <div
          key={index}
          className="swiper-slide"
          style={{
            background: "white",
            borderRadius: "10px",
            width: "270px",
            margin: "0 .4em"
          }}
        >
          <div style={{ padding: "2em 6em" }}>Hello</div>
        </div>
      ))}
    </div>
  );
};

export default App;