使用TailwindCSS水平放置元素

因此，我使用的是Tailwindcss和laravel，在这个页面中，我试图根据产品类别在页面中横向定位产品

这是产品清单

因此，为了将它们水平放置，我尝试使用class=“flex-flex-wrap-content-start-space-x-2” 但是宽度改变了，变成这样。

代码如下：

{{$category->title}}}}}>（Voir tout les produits） @foreach（$category->products as$product）

{{-- <div>{{ $product->title }}</div> --}}

        <div class="mt-5">
            
                <div class="max-w-sm mx-auto rounded-md shadow-md overflow-hidden">
                    <div class="flex items-end justify-end h-56 w-full bg-cover" style="background-image: url('https://images.unsplash.com/photo-1563170351-be82bc888aa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=376&q=80')">
                        <button class="p-2 rounded-full bg-blue-600 text-white mx-5 -mb-4 hover:bg-blue-500 focus:outline-none focus:bg-blue-500">
                            <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                        </button>
                    </div>
                    <div class="px-5 py-3">
                        <h3 class="text-gray-700">{{ $product->title }}</h3>
                        <span class="text-gray-500 mt-2">{{ $product->price }} DA</span>
                    </div>
                </div>
            
        </div>
    
    
@endforeach

{{--{{$product->title}}--}
{{$product->title}
{{$product->price}}DA
@endforeach

---

@endforeach

flex col项目中心在“max-w-sm div”中应该足够了

这是一个有效的演示：
请更喜欢发布实际文本，而不是代码的屏幕截图。你好，Kissu，我添加了代码。你好，我的示例仍然不起作用？你好，不，它不起作用，但我找到了解决方案，我必须更改foreach循环的使用方式，以便以正确的顺序获取元素。你好，谢谢你的回答但这不是我想要的，我想水平对齐它们。顺便说一句，我的示例确实水平对齐元素。
{{-- <div>{{ $product->title }}</div> --}}

        <div class="mt-5">
            
                <div class="max-w-sm mx-auto rounded-md shadow-md overflow-hidden">
                    <div class="flex items-end justify-end h-56 w-full bg-cover" style="background-image: url('https://images.unsplash.com/photo-1563170351-be82bc888aa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=376&q=80')">
                        <button class="p-2 rounded-full bg-blue-600 text-white mx-5 -mb-4 hover:bg-blue-500 focus:outline-none focus:bg-blue-500">
                            <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                        </button>
                    </div>
                    <div class="px-5 py-3">
                        <h3 class="text-gray-700">{{ $product->title }}</h3>
                        <span class="text-gray-500 mt-2">{{ $product->price }} DA</span>
                    </div>
                </div>
            
        </div>
    
    
@endforeach