如何在 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>

有效，但我需要的不同：保存后立即取消对齐，而不是我需要的beofre。

哪种方式正确？

谢谢！

Answer 1

float-right 会将元素从右向左放置，因此您只需调换取消和保存按钮的顺序即可：

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

Answer 2

我更喜欢在父元素中使用 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.tailwindcss.com/CY54ArgXe4

如何在 tailwindcss 中使用 2 个按钮取消和保存右对齐制作页脚

How in tailwindcss to make footer with 2 buttons Cancel and Save right aligned

tailwind-css