使用Tailwind CSS构建Navbar时Nav_Items下移布局异常原因咨询

原因分析 #

问题出在内联元素的基线对齐和flex容器的默认行为上：

• 你的Nav_Link1和Nav_Link默认是内联元素，浏览器会按基线对齐这些元素。当Nav_Link1有文本时，所有元素的基线都和文本基线对齐，布局正常；
• 移除文本后，Nav_Link1的基线会跳到元素的顶部位置，其他带文本的Nav_Link仍保持文本基线对齐，这就导致整个导航项组下移，同时第一个项因为基线位置高，看起来比其他项更靠上。

另外，你的Nav_Menu容器没有设置垂直居中对齐，默认的stretch对齐方式会让导航项高度拉伸，但内联元素的基线对齐优先级更高，加剧了偏移问题。

解决方法 #

给Nav_Menu添加items-center类，强制所有导航项垂直居中对齐，彻底解决基线偏移问题：

<div class="Nav_Menu flex space-x-4 items-center">

或者，给所有导航链接（Nav_Link1和Nav_Link）添加inline-block或flex类，改变它们的显示模式，避免基线对齐影响：

<a class="Nav_Link1 inline-block px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-gray-700"></a>

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