html - 页脚元素未正确对齐

Question

我无法理解为什么页脚 2 item1 中有一些左边距。虽然我没给过。请帮忙。

.footer1,
.footer2 {
  width: 100%;
  background: rgb(243, 242, 242);
}

.footer2 ul {
  display: flex;
}

.footer2 ul li {
  list-style: none;
}

<footer>
  <div class="footer1">Item1</div>
  <div class="footer2">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
</footer>

Answer 1

.footer1,
.footer2 {
  width: 100%;
  background: rgb(243, 242, 242);
}

.footer2 ul {
  display: flex;
  padding: 0;
}

.footer2 ul li {
  list-style: none;
}

<footer>
  <div class="footer1">Item1</div>
  <div class="footer2">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
</footer>

ul 标签具有默认的 padding。所以如果你想删除ul中的一些间隙，你可以设置padding: 0。

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists