0
236
VistasEl relleno CSS no se aplica al div en reaccionar js
Tengo un div como este en react js que genera múltiples divs y desbordamientos:
<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> Pero por alguna razón, el relleno se aplica al lado derecho de los contenedores pero no al lado izquierdo. Aquí hay algunas imágenes: 
¿Cómo puedo aplicar relleno al div del contenedor del elemento de matriz para los lados izquierdo y derecho?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Es el relleno en el div. Es a poco y el margen también.
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;
·
Juan Pablo Isaza
Denunciar
0
Es porque el ancho de su div es más grande que el cuerpo y, como resultado, su cuerpo también tiene desplazamiento. Intente agregar boxSizing: border-box a su componente principal y el desplazamiento del cuerpo desaparecerá.
const App = () => { return ( <div style={{ display: "flex", padding: "1em 0em", overflowX: "auto", width: "100%", direction: "rtl", background: "#ef394e", boxSizing: "border-box" // <--- this line }} > ... </div> ); };
·
Juan Pablo Isaza
Denunciar
Responde la pregunta