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

【问题标题】：Why is the last li item appearing outside of the parent container?为什么最后一个 li 项目出现在父容器之外？
【发布时间】：2019-11-05 07:24:02
【问题描述】：

我导航中的最后一个 li 项目出现在其父项之外。我希望它留在父容器内，并且右侧还有 1em 的边距（与徽标的间距相同，但相反）。

我尝试在菜单和 ul 类上放置 width: 100%。

*,*: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 填充。与标志的间距基本相同，但相反。

【问题讨论】：

标签： html css

【解决方案1】：

因为你的 li 有位置 absolute 和 body 标签，而 body 有一个 30px 的边框。

你可以设置li的right来减少body右边的空间。

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>

【讨论】：