Question

导航中的最后一个li项显示在其父项之外。我希望它保留在父容器中，并且在右边也有1em的边距（与徽标相同，但是相反）。

我尝试将宽度：100％放置在菜单和ul类上。

*,*:before,*:after { box-sizing: inherit; margin: 0; padding: 0; border: none; }

body {
  position: relative;
  line-height: 1.5em;
  min-width: 320px;
  margin: 0 auto;
  border: 30px solid #ffffff;
  background-color: #f8f7f3;
}

.body-wrap {
  display: flex;
  min-height: 100vh;
  display: box;
}

.header {
  width: 100%;
  max-width: 960px;
  margin-right: 1rem;
  margin-left: 1rem;
}

.menu {
  display: flex;
  position: absolute;
  top: -0.83rem;
  width: 100%;
}

.menu li:not(:first-child){
  text-align: right;
}

li {
  flex-grow: 1;
  position: relative;
  display: inline-block;
}

<body>
  <div class="body-wrap">
    <header class="header">
      <nav role="navigation">
        <ul class="menu">
          <li class="home-link"><a href="#"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Writing</a></li>
          <li><a href="#">Speaking</a></li>
          <li><a href="#">Projects</a></li>
        </ul>
      </nav>
    </header>
  </div>
</body>

我希望最后一个li项目（项目）在灰白色的右侧具有1em填充。与徽标的间距基本相同，但相反。

Answer 1

因为您的li的位置为absolute，并且带有body标签，并且body的边框为30px。

您可以为li设置权，以减小右侧与身体的距离。

li {
      flex-grow: 1;
      position: relative;
      display: inline-block;  
      right: 18px;
    }

*,*:before,*:after { box-sizing: inherit; margin: 0; padding: 0; border: none; }

body {
  position: relative;
  line-height: 1.5em;
  min-width: 320px;
  margin: 0 auto;
  border: 30px solid #ffffff;
  background-color: #f8f7f3;
}

.body-wrap {
  display: flex;
  min-height: 100vh;
  display: box;
}

.header {
  width: 100%;
  max-width: 960px;
  margin-right: 1rem;
  margin-left: 1rem;
}

.menu {
  display: flex;
  position: absolute;
  top: -0.83rem;
  width: 100%;
}

.menu li:not(:first-child){
  text-align: right;
}

li {
  flex-grow: 1;
  position: relative;
  display: inline-block;
 
  right: 18px;
}

<body>
  <div class="body-wrap">
    <header class="header">
      <nav role="navigation">
        <ul class="menu">
          <li class="home-link"><a href="#"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Writing</a></li>
          <li><a href="#">Speaking</a></li>
          <li><a href="#">Projects</a></li>
        </ul>
      </nav>
    </header>
  </div>
</body>

为什么最后一个li项目出现在父容器之外？

1 个答案: