使用Tailwind CSS实现图片列表水平排列失败的技术问询

我尝试用Tailwind CSS创建图片展示列表时遇到问题：overflow-x滚动条已出现，但图片元素没能水平排列，而是垂直堆叠。

当前显示效果：

期望实现效果：图片在窗口内水平排列且滚动条隐藏

原代码 #

行项展示组件代码

return (
    <>
    
    <h1 className='text-white font-bold ms-text-xl p-4'>{title}</h1>
    <div className='relative flex items-center '>
        <div className=' w-full h-full overflow-x-scroll whitespace-nowrap scroll-smooth scrollbar-hide relative inline-block'>
            {movies?.map((item,id) => (
                <Movie key={id} item={item} />
            ))}
        </div>
    </div>
    </>
  )

电影图片组件代码

return (
    <div>
        <div className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block relative p-2'>
                    <img className='w-full h-auto block' src={`https://image.tmdb.org/t/p/w500/${item.backdrop_path}`} alt='movie?.title'/>
                    <div className='absolute  top-0 left-0 w-full h-full hover:bg-black/80 opacity-0 hover:opacity-100 text-white'>
                    <p className=' whitespace-normal text-xs md:text-sm font-bold flex justify-center items-center h-full text-center ' >{item?.title}</p>
                        <div className='absolute flex items-center justify-end gap-2 right-2 top-2'>
                            <p className=' whitespace-normal text-xs md:text-sm font-medium text-yellow-500 text-center '>IMDb:⭐{item?.vote_average}</p>
                            <div>{wishlist ? <FaHeart className=''/> :<FaRegHeart className=' bg-red-600 '/> }  </div>
                        </div>
                    </div>
        </div>
    </div>
  )

解决方案 #

核心问题是电影图片组件外层多了一个块级div，强制每个Movie组件占满一行，导致垂直排列。同时滚动容器的布局属性需要调整，确保子元素水平排列。

修改后的行项展示组件代码

return (
    <>
        <h1 className='text-white font-bold ms-text-xl p-4'>{title}</h1>
        <div className='relative'>
            <div className='w-full overflow-x-scroll whitespace-nowrap scroll-smooth scrollbar-hide flex'>
                {movies?.map((item, id) => (
                    <Movie key={id} item={item} />
                ))}
            </div>
        </div>
    </>
)

修改后的电影图片组件代码

return (
    <div className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] relative p-2'>
        <img className='w-full h-auto block' src={`https://image.tmdb.org/t/p/w500/${item.backdrop_path}`} alt={item?.title} />
        <div className='absolute top-0 left-0 w-full h-full hover:bg-black/80 opacity-0 hover:opacity-100 text-white'>
            <p className='whitespace-normal text-xs md:text-sm font-bold flex justify-center items-center h-full text-center'>{item?.title}</p>
            <div className='absolute flex items-center justify-end gap-2 right-2 top-2'>
                <p className='whitespace-normal text-xs md:text-sm font-medium text-yellow-500 text-center'>IMDb:⭐{item?.vote_average}</p>
                <div>{wishlist ? <FaHeart /> : <FaRegHeart className='bg-red-600' />}</div>
            </div>
        </div>
    </div>
)

关键修改点 #

1. 移除电影图片组件最外层的多余div，避免块级元素强制换行
2. 给滚动容器添加flex属性，配合whitespace-nowrap确保子元素水平排列
3. 移除滚动容器的inline-block和父容器的flex items-center（如需垂直居中可保留，不影响水平布局）

内容的提问来源于stack exchange，提问作者Rio