使用 TailwindCSS 水平定位元素答案

【问题标题】：Position elements horizontally with TailwindCSS使用 TailwindCSS 水平定位元素
【发布时间】：2021-07-11 02:39:00
【问题描述】：

所以我正在使用 Tailwindcss 和 laravel，在这个页面中我试图根据产品的类别在页面中水平放置产品

这是产品列表

为了将它们水平放置，我尝试使用 class="flex flex-wrap content-start space-x-2" 但是宽度会改变并变成那样。

代码如下：

@foreach ($categories as $category)

{{ $category->title }} id) }}">(Voir tout les produits) @foreach ($category->products 作为 $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

@endforeach

【问题讨论】：

请更喜欢发布实际文本而不是代码的屏幕截图。
你好 Kissu，我添加了代码。
嗨，我的例子还是不行？
您好，不，它不起作用，但我找到了解决方案，我必须更改使用 foreach 循环的方式，以便我可以按正确的顺序获取元素。

标签： css laravel tailwind-css

【解决方案1】：

flex flex-col items-center 在“max-w-sm div”上应该足够了。

这是一个工作演示：https://play.tailwindcss.com/NMps4Dr0m0

【讨论】：

您好，感谢您的回答，但这不是我想要的，我想将它们水平对齐。
我的示例确实将元素水平对齐。