如何在 tailwindcss 中使页脚带有 2 个按钮“取消”和“保存”右对齐

Question

使用 tailwindcss，我使页脚带有 2 个按钮“取消”和“保存”右对齐：

<div class="p-2 flex">
    <div class="w-1/2">Empty Space</div>
    <div class="w-1/2">
        <button type="submit" class="bg-gray-500 text-white p-2 rounded text-sm w-auto float-right">
            Cancel
        </button>
        <button type="submit" class="bg-yellow-500 text-white p-2 ml-6 rounded text-lg w-auto float-right ">
            Save
        </button>
    </div>
</div>

它有效，但我需要不同：保存后立即取消对齐，而不是按照我需要的那样。

哪种方式是正确的？

谢谢！

Answer 1

我更喜欢flex justify-end在父元素中使用而不是使用float-right

<div class="p-2 flex">
    <div class="w-1/2">Empty Space</div>
    <div class="w-1/2 flex justify-end">
        <button type="submit" class="bg-gray-500 text-white p-2 rounded text-sm w-auto">
            Cancel
        </button>
        <button type="submit" class="bg-yellow-500 text-white p-2 ml-6 rounded text-lg w-auto">
            Save
        </button>
    </div>
</div>

这是使用 Tailwind Play 的示例

https://play.tai​​lwindcss.com/CY54ArgXe4