Question

我有一个简单的导航元素，可以将我的页脚放在页面上。

当我向此项添加填充时，元素会缩小所述填充量。

通常，当您向元素添加填充时，它不会缩小实际元素。我知道box-sizing: border-box确保填充包含在总宽度中，但我已经将宽度设置为父级的100％。

页眉或页脚元素没有发生同样的问题。

这里真的很困惑。

Codepen：https://codepen.io/emilychews/pen/opZjEr

/* NAV ABOVE FOOTER */

body {
  margin: 0;
  padding: 0;
  width: 100%;
}

#footer-nav {
  position: relative;
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
}

ul#footer-nav-items {
  margin: 0;
  padding: 1rem 1rem 1rem 0;
  display: flex;
  justify-content: flex-start;
  background: yellow;
}

ul#footer-nav-items li {
  list-style-type: none;
  padding-right: 1.44rem;
}

<nav id="footer-nav">
  <ul id="footer-nav-items">
    <li class="footer-menu-item">Home</li>
    <li class="footer-menu-item">Privacy / Terms</li>
    <li class="footer-menu-item">Contact</li>
  </ul>
</nav>

Answer 1

导航元素不会随着填充而缩小。它保持在width: 100%。

也许您正在根据黄色背景颜色来判断导航元素的宽度。

请注意，黄色背景应用于ul而非nav元素。

意外的填充行为 - Flexbox

1 个答案: