如何在tailwindcss中使页脚与2个按钮“取消”和“保存”右对齐
如何在tailwindcss中使页脚与2个按钮“取消”和“保存”右对齐
提问于 2021-02-09 20:48:25
在tailwindcss中，我用两个按钮Cancel和Save right aligned创建了页脚：
<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>它可以工作，但我需要不同的:在保存后立即取消对齐，而不是像我需要的那样取消对齐。
哪种方式是正确的？
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-09 22:46:46
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>Stack Overflow用户
发布于 2021-02-10 07:27:10
与使用float-right相比，我更喜欢在父元素中使用flex justify-end
<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的示例
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66119330
复制相关文章
相似问题
腾讯云开发者
