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

Posted 2023-03-07

【中文标题】如何在tailwindcss中使用2个按钮取消和保存右对齐的页脚

【英文标题】：How in tailwindcss to make footer with 2 buttons Cancel and Save right aligned

【发布时间】：2021-05-13 02:29:51

【问题描述】：

使用 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>

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

哪种方式正确？

谢谢！

【问题讨论】：

I need : Cancel aligned right after save, not beofre as I need你能解释一下吗？

如果您添加一张快速绘图来解释您想要的东西会很有帮助

我需要这样：prnt.sc/yuq18z

【参考方案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.tailwindcss.com/CY54ArgXe4

【参考方案2】：

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>