<nav>调整大小以适合儿童内容

Question

我已经尝试了今天书中的每一个CSS技巧，让我的父导航标签home-main-nav-menu根据它的孩子和大孩子来调整大小，但我不能为我的生活做好准备。让它工作。如果有人可以提供和解释如何解决这个问题会非常棒，并解释为什么元素不会自然扩展以适应它的儿童内容会更好。谢谢！ [见图片和css供参考]

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

see CSS for color map

Answer 1

问题在于你的班级：

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

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

将其更改为：

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

解决问题。这仍然会将ul元素从流中拉出，但是如果没有指定特定位置，则将元素保持在流中的位置，并将原始位置保持在文档的主流中。

来自 MDN ：

  

绝对

     

元素从正常文档流中删除;的 无   为页面布局中的元素创建空间 。相反，它是   相对于其最近的祖先（如果有的话）定位;   否则，它相对于初始包含块放置。它的   最终位置由top，right，bottom和的值决定   剩下。此值在值为的时创建新的堆叠上下文   z-index不是自动的。绝对定位的盒子可以有边距，和   它们不会随着任何其他边缘而崩溃。

     

<强>相对

     

元素根据正常流量定位   文档，然后根据值的相对于自身的偏移量   顶部，右侧，底部和左侧。偏移量不会影响位置   任何其他元素; 因此，为元素中给出的空间   页面布局与位置是静态的相同。 此值创建   当z-index的值不是auto时，新的堆栈上下文。该   相对于表的影响 - * - 组，表行，表 - 列，   table-cell和table-caption元素未定义。

另外，删除：

width: 95.5%;

来自.main-ul类的

使ul元素不会溢出父元素。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;