CSS 问题：无法为图像行添加边距（React JS）答案

【问题标题】：CSS issue: Unable to add margin to row of images (React JS)CSS 问题：无法为图像行添加边距（React JS）
【发布时间】：2020-11-01 04:07:16
【问题描述】：

我无法为图像行添加边距。边距在宽屏幕中没有css，但是当我将其缩小到移动视图时，边距变为0。 所以我从 css 中添加了 10px 的边距，它没有任何区别。

我不擅长css，请帮忙。

CSS：

.row__posters {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
}
.row__poster  {
    transition: transform 300ms;
    /* preserves the aspect ratio */
    object-fit: contain;
    width: 100%;
    max-height: 100px;
    margin-right: 10px;
}
.row__poster:hover  {
    transform: scale(1.1);
    z-index: 1;
}

反应 JSX：

import '../styles/Row.css';

const Row = ({ title, movies }) => {
    const posterUrl = "https://image.tmdb.org/t/p/w500/";
    const renderedRow = movies.map(movie => {
        return (
            <img
                className="row__poster"
                src={`${posterUrl}${movie.poster_path}`}
                alt={movie.title}
                key={movie.id} />
        );
    });
    return (
        <div className="row">
            <h1>{title}</h1>
            <div className="row__posters">
                {renderedRow}
            </div>
        </div>
    );
};

export default Row;

这是它在窄幅上的样子：

注意：在 React 中使用 NextJS。

【问题讨论】：

您尝试在哪里添加margin: 10px;？看起来应该可以将该 CSS 添加到 .row。

标签： css reactjs sass flexbox

【解决方案1】：

您是否尝试过使用padding 而不是margin？我认为以下选项可能对您有用：

在.img_wrapper 上使用padding

    .row__posters {
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .row__poster  {
        transition: transform 300ms;
        /* preserves the aspect ratio */
        object-fit: contain;
        width: 100%;
        max-height: 100px;
        // margin-right: 10px; comment this
        display: inline-block;
        padding-right: 10px;
    }
    .row__poster:hover  {
        transform: scale(1.1);
        z-index: 1;
    }

您可以查看here 进行现场演示。希望对你有用

【讨论】：