如何在Tailwind中将导航栏项对齐到右上角？

具体调整点： #

• 移除 flex-row-reverse：该类会反转导航项的排列顺序，若需保持「Home → Services → About → Contact Us」的正常顺序，必须移除；若不在意顺序可保留，但导航项会从右到左排列。
• 添加 justify-end：这是让导航项整体靠右对齐的核心类，flex容器下使用该类会让子元素沿水平主轴末端对齐。
• 可选添加 w-full：如果当前导航容器的父元素未占满页面宽度，给该div添加w-full确保容器自身撑满宽度，这样justify-end才能让导航项贴到最右侧。

修改后的完整代码： #

<div class="flex md:flex w-full md:flex-grow justify-end space-x-1">
  <a href="" class="py-4 px-2 text-teal-500 border-b-4 border-teal-300 font-semibold">Home</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Services</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">About</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Contact Us</a>
</div>

补充说明： #

如果导航栏嵌套在更大的顶部容器中，需确保外层容器设置w-full和合适的flex布局，内部导航项才能正确对齐到右上角。

内容的提问来源于stack exchange，提问作者Shefna Saidali