TailwindCSS中等屏幕下如何将绿色按钮居右对齐？

问题原因 #

你用last:justify-end没效果，是因为这个类是给最后一个子元素设置justify-end，但按钮本身嵌套在一个<div>里，这个<div>作为父容器的子元素，justify-end只会调整该<div>内部内容的对齐方式，无法让这个<div>在父容器里居右。

修复方案一（推荐） #

给按钮所在的<div>添加md:ml-auto类，中等屏幕及以上尺寸下，该<div>会自动通过左外边距填满父容器剩余空间，从而实现居右效果。同时修正你原代码中按钮标签闭合错误的问题：

<header>
  <div class="container flex flex-col items-center space-y-3 p-4 md:flex-row">
    <a class="flex items-center space-x-3">
      <span class="text-2xl font-semibold text-orange-500">Hello</span>
    </a>
    <div class="flex space-x-3 md:ml-auto">
      <button class="cursor-pointer select-none rounded bg-green-500 px-6 py-2 text-white hover:bg-green-600 focus:outline-none">Button</button>
    </div>
  </div>
</header>

修复方案二 #

给父容器添加md:justify-between类，让两个子元素分别靠父容器左右两侧对齐：

<header>
  <div class="container flex flex-col items-center space-y-3 p-4 md:flex-row md:justify-between">
    <a class="flex items-center space-x-3">
      <span class="text-2xl font-semibold text-orange-500">Hello</span>
    </a>
    <div class="flex space-x-3">
      <button class="cursor-pointer select-none rounded bg-green-500 px-6 py-2 text-white hover:bg-green-600 focus:outline-none">Button</button>
    </div>
  </div>
</header>

内容的提问来源于stack exchange，提问作者Kevin Mahrous