如何使用Tailwind CSS实现Label内文本的响应式布局适配

问题原因 #

你使用了固定值外边距ml-48控制「忘记密码」链接的位置，这个固定长度不会跟随容器宽度、Label内容宽度自适应，窗口分辨率变化时父容器宽度变动，固定边距就会导致链接位置偏移。

解决方案 #

把固定边距替换为flex布局的自动空间分配规则即可实现位置固定，两种常用实现方案：

方案1：两端对齐（Label靠左，忘记密码靠右，最常用的表单布局方案） #

给外层flex容器添加justify-between（两端分配空间）和items-center（垂直居中对齐），同时删除Link上的ml-48属性：

<div class="flex justify-between items-center">
  <BreezeLabel for="password" value="Password" /> 
  <Link
    :href="route('password.request')"
    class="text-sm text-purple-600 hover:text-purple-800"
  >
    Forgot your password?
  </Link>
</div>

方案2：固定间距左对齐（两个元素都靠左，仅保留固定间距） #

如果不需要两端对齐，只需要Label和链接保持固定间距靠左排列，把ml-48替换为小尺寸的固定边距即可，同时给外层容器加items-center保证垂直对齐：

<div class="flex items-center">
  <BreezeLabel for="password" value="Password" /> 
  <Link
    :href="route('password.request')"
    class="text-sm text-purple-600 hover:text-purple-800 ml-4"
  >
    Forgot your password?
  </Link>
</div>

额外说明 #

如果需要适配不同屏幕尺寸的间距，可以配合Tailwind的响应式前缀指定不同分辨率下的边距值，比如ml-2 md:ml-4实现小屏用小间距、大屏用大间距的效果。

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