html - 我的导航栏在他们的 parent 之外拉伸(stretch)，即使他们的宽度设置为最大宽度 100%，有人知道为什么吗？

Question

我有一个下拉菜单，当它出现时我注意到出现了一个滚动条。我将它设置为显示 block ，因此它始终可见并将其背景颜色更改为红色，我将其父级的背景颜色更改为蓝色，下拉菜单占用了其父级的宽度，但它看起来像它的父级导航带有主导航类的 li 正在向其父级扩展，并使用带有子导航类的下拉菜单。有谁知道为什么主导航向其父方向延伸？我假设它与下拉菜单的绝对定位有关，但我不完全确定为什么或如何修复它

https://jsfiddle.net/93qft4d7/1/

    .main-nav li{
        background-color: blue;
        list-style: none;
        margin: 0 5px;
        padding: 0;
        max-width: 100%;
        }
   .main-nav > li{
        float: left;
       }
  .sub-nav {
      background-color: red;
      width: 100%;
      display: block;
      margin: auto;
      position: absolute;
      padding: 0;
      max-width;
     }

Answer 1

当您为一个元素指定一个 max-width 时，它将采用父元素的宽度 - 在这种情况下，您的父元素是该父元素的 100%，也就是页面的 100%。您要么需要给父级一个设置的宽度，要么每个 li 元素都有自己的宽度。