如何用Tailwind CSS Flex实现Footer社交图标右对齐并匹配左侧间距？

要实现社交媒体图标居右且与左侧列表项边距相等的效果，只需调整Flex布局属性并修正HTML结构，具体修改如下：

修改后的代码 #

<div className="mx-20 mb-20">
  <Divider style={{ background: '#5E5E5E96' }} orientation="horizontal" />
  <div className="mt-8 w-full flex justify-between">
    <ul className="flex items-center">
      <li className="ml-8 mr-20">&copy;2022 {name}</li>
      <div className="flex space-x-20">
        <li>Cookie Policy</li>
        <li>Refund Policy</li>
        <li>Privacy Policy</li>
        <li>Terms & Conditions</li>
      </div>
    </ul>
    <div className="icons flex items-center mr-8">
      <img src={InstagramIcon} alt="Instagram icon" />
      <img src={FacebookIcon} alt="Facebook icon" />
      <img src={TwitterIcon} alt="Twitter icon" />
      <img src={Linkedin} alt="Linkedin icon" />
    </div>
  </div>
</div>

关键调整点 #

• 外层Flex容器添加justify-between类，让左侧列表和右侧图标分别对齐容器左右两端
• 给右侧图标容器添加mr-8，与左侧列表项的ml-8保持一致，实现左右边距相等
• 修正HTML结构：移除ul内的span标签（ul的直接子元素必须是li），改用div包裹政策链接组，同时给ul和图标容器添加items-center确保垂直居中

内容的提问来源于stack exchange，提问作者Jennifer De Goede