<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和拉动所有这些元素脱离了文件的正常流程nt并进入它自己的层。这有效地将nav从其子ul中断开，即使HTML结构将它们显示为一个组。

将其更改为：

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

解决了这个问题。这仍然将ul元素从流中抽出，但未指定特定位置，请将元素保存在流中并将原始位置保存在文档的主流中。

从MDN：

绝对

该元件是从正常的文件流中去除; 否 为页面布局中的元素创建空间。相反，它是相对于其最接近定位的祖先而定位的，如果有的话;否则，它相对于初始包含块放置。它的 最终位置由top，right，bottom和 左边的值确定。当值为 的z-index不是自动时，此值将创建新的堆叠上下文。绝对定位的盒子可以有边距，并且它们不会与任何其他边距合拢。

相对

该元件是根据 文件的正常流动定位，然后基于对 顶部的偏移值相对于本身，右，下和左。偏移不会影响任何其他元素的位置 ; 因此， 页面布局中为元素指定的空间与位置为静态时的空间相同。此值创建 z-index的值不是自动时的新堆栈上下文。 表格单元格和表格标题元素相对于表格 - * - 组，表格 - 行，表格 - 列元素的相对效果未定义。

另外，删除：

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>