顺风- css -挠曲放置

Question

我有一个页脚和一些列表项目，然后一些社交媒体图标。我想把社交媒体项目移到页脚的右边。我怎样才能做到这一点？我一直在玩flex，但是还没有什么效果。

  <div className="mx-20 mb-20">
    <Divider style={{ background: '#5E5E5E96' }} orientation="horizontal" />
    <div className="mt-8 w-full flex">
      <div>
        <ul className="flex">
          <span className="ml-8 mr-20">
            <li>&copy;2022 {name}</li>
          </span>
          <span className="flex space-x-20">
            <li>Cookie Policy</li>
            <li>Refund Policy</li>
            <li>Privacy Policy</li>
            <li>Terms & Conditions</li>
          </span>
        </ul>
      </div>
      <div className="icons flex">
        <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>

因此，我希望图标与右边的距离与第一个列表项目从左边的距离相同。

​

Answer 1

您可以通过多种方式这样做：

将justify-between

• add ml-auto添加到要移动的项中。

在这两种情况下，您的flex容器都必须是100%宽的w-full。

Answer 2

您可以在最外层的div上添加justify-between或justify-evenly，该div可以同时包装列表和图标。

下面是代码

<div className="mx-20 mb-20">
    <Divider style={{ background: '#5E5E5E96' }} orientation="horizontal" />
    <div className="mt-8 w-full flex items-center justify-between">
      <div>
        <ul className="flex">
          <span className="ml-8 mr-20">
            <li>&copy;2022 {name}</li>
          </span>
          <span className="flex space-x-20">
            <li>Cookie Policy</li>
            <li>Refund Policy</li>
            <li>Privacy Policy</li>
            <li>Terms & Conditions</li>
          </span>
        </ul>
      </div>
      <div className="icons flex">
        <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>

items-center是垂直对齐的