在 ul 元素中留出间隙

Question

如何使我的三个元素均匀伸展？

.flex {
  display: flex;
}
.js-spacebetween {
  justify-content: space-between;
}

<footer class="padding-footer">
      <div class="wrapper-80 flex js-spacebetween">
        <div class="left">
          <img src="./images/Vector (3).png" alt="white logo" />
          <p>International Foundation for Electoral Systems (IFES)</p>
          <div class="flex">
            <p><i class="fa-solid fa-phone"></i>[phone]</p>
            <p><i class="fa-regular fa-envelope"></i>[email protected]</p>
          </div>
        </div>
        <div class="center">
          <ul>
            <a href="#">Информирај се</a>
            <a href="#">Дискусии</a>
            <a href="#">Контакт - корисни линкови</a>
            <a href="#">Закон за заштита на личните податоци</a>
          </ul>
        </div>
        <div class="right">
          <ul>
            <li>MK | AL</li>
            <li>
              <a href="#"><i class="fa-brands fa-square-facebook"></i></a>
              <a href="#"><i class="fa-brands fa-instagram"></i></a>
              <a href="#"><i class="fa-brands fa-youtube"></i></a>
              <a href="#"><i class="fa-brands fa-tiktok"></i></a>
            </li>
            <li>© All Rights Reserved. | safeblink.mk</li>
          </ul>
        </div>
      </div>
    </footer>

别在意造型，我想要的只是设计像图片一样

Answer 1

你需要做的是在CSS中添加一条额外的规则，给所有3个div的宽度为100%，它们将占据均匀的宽度。

.left, .center, .right {
    width: 100%;
}

然后，您可以进入每个 div 并再次弯曲以满足您的设计要求，但上述内容可确保它们都占据相同的宽度。