<nav> 调整大小以适应子内容

Question

我今天尝试了书中的每一个 CSS 技巧，让我的父导航标签home-main-nav-menu 根据它的孩子和孙子调整大小，但我一辈子都无法让它工作。如果有人可以提供并解释如何解决这个问题，那就太好了，并且解释为什么元素不能自然地扩展以适应它的子内容会更好。谢谢！ [参考图片和css]

$(document).ready(function(){
    $('.main-ul').children('li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
});

.home-main-nav-menu{
  border-style: double;
  border-color: cyan;
}
.A{
  display: inline-block;
  text-align: center;
  padding-left: 5px;
  margin-right: 10px;
  border-style: double;
  border-color: purple;
}
.B{
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
}
.A > ul {
  display: none;
}
.main-ul{
  border-style: double;
  border-color: green;
  width: 95.5%;
  margin-left: -3px;
}
ul{
  text-align: center;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class = "home-main-nav-menu">
    <ul class = "main-ul">
      <li class = "A"><a href = "#/">a</a></li>
      <li class = "A"><a href = "#/">b</a>
        <ul>
          <li class = "B"><a href = "#/">c</a></li>
          <li class = "B"><a href = "#/">d</a></li>
        </ul>
      </li>
      <li class = "A"><a href = "#/">e</a></li>
      <li class = "A"><a href = "#/">f</a>
      <ul>
        <li class = "B"><a href = "#/">f</a></li>
        <li class = "B"><a href = "#/">g</a></li>
      </ul>
    </li>
      <li class = "A"><a href = "#/">h</a>
      <ul>
        <li class = "B"><a href = "#/">i</a></li>
        <li class = "B"><a href = "#/">j</a></li>
      </ul>
     </li>
      <li class = "A"><a href = "#/">k</a>
      <ul>
        <li class = "B"><a href = "#/">l</a></li>
        <li class = "B"><a href = "#/">m</a></li>
      </ul>
      </li>
    </ul>
</nav>

see CSS for color map

Answer 1

问题是你的班级：

ul{
  text-align: center;
  position: absolute;
}

将所有ul 定位为absolute 并将所有这些元素从文档的正常流程中拉出并进入其自己的层。这有效地将 nav 与其子 uls 断开连接，即使 HTML 结构将它们显示为一个组。

改成：

ul{
  text-align: center;
  position: relative;
}

解决问题。这仍然会将ul 元素从流中拉出，但不指定特定位置，将元素保留在流中的位置，并在文档的主要流中保持原始位置。

来自MDN：

绝对

元素从正常的文档流中移除； 没有 为页面布局中的元素创建空间。相反，它是 相对于其最近的定位祖先（如果有）定位； 否则，它相对于初始包含块放置。它的 最终位置由 top、right、bottom 和 左边。当值为 z-index 不是自动的。绝对定位的框可以有边距，并且 它们不会与任何其他边距一起折叠。

相对

元素按照正常流程定位 文档，然后根据值相对于自身偏移 顶部、右侧、底部和左侧。偏移量不影响位置 任何其他元素； 因此，在 页面布局与位置是静态的相同。此值创建 当 z-index 的值不是 auto 时的新堆叠上下文。这 relative 对 table-*-group、table-row、table-column 的影响， table-cell 和 table-caption 元素未定义。

另外，删除：

width: 95.5%;

来自.main-ul 类的ul 元素不会溢出父级。

$(document).ready(function(){
    $('.main-ul').children('li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
});

.home-main-nav-menu{
  border-style: double;
  border-color: cyan;
}
.A{
  display: inline-block;
  text-align: center;
  padding-left: 5px;
  margin-right: 10px;
  border-style: double;
  border-color: purple;
}

.B{
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
}
.A > ul {
  display: none;
}
.main-ul{
  border-style: double;
  border-color: green;
  margin-left: -3px;
}

ul{
  text-align: center;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class = "home-main-nav-menu">
    <ul class = "main-ul">
      <li class = "A"><a href = "#/">a</a></li>
      <li class = "A"><a href = "#/">b</a>
        <ul>
          <li class = "B"><a href = "#/">c</a></li>
          <li class = "B"><a href = "#/">d</a></li>
        </ul>
      </li>
      <li class = "A"><a href = "#/">e</a></li>
      <li class = "A"><a href = "#/">f</a>
      <ul>
        <li class = "B"><a href = "#/">f</a></li>
        <li class = "B"><a href = "#/">g</a></li>
      </ul>
    </li>
      <li class = "A"><a href = "#/">h</a>
      <ul>
        <li class = "B"><a href = "#/">i</a></li>
        <li class = "B"><a href = "#/">j</a></li>
      </ul>
     </li>
      <li class = "A"><a href = "#/">k</a>
      <ul>
        <li class = "B"><a href = "#/">l</a></li>
        <li class = "B"><a href = "#/">m</a></li>
      </ul>
      </li>
    </ul>
</nav>