对齐显示的灵活父菜单的子菜单

Question

我在菜单下面有一个子菜单，其中包含属性display: flex，列表项的属性为flex-grow: 1

我想对齐子菜单，以便链接与父对齐，如下所示：

这是有效的，因为我给了子菜单属性left: 19px。这样可以解决问题，因为菜单及其项目是flex显示的，当浏览器收缩时，列表项的宽度会随之缩小，因此子菜单不会对齐。下面是浏览器收缩200px时的屏幕截图：

是否有css类或我可以做的任何事情让子菜单链接与浏览器收缩时的父链接对齐？我在技术上可以进行大量的媒体查询并更改left:，但我想我会问是否有人有更好的解决方案。

这是我的代码。我删除了很多，但留下了这个问题似乎必要的代码。

＆＃13;

＆＃13;

#menu-main-menu {
  display: flex;
}
#menu-main-menu li {
  float: left;
  flex-grow: 1;
  text-align: center;
  position: relative;
}
#menu-main-menu li a {
  display: inline-block;
  padding: 40.5px 0;
}
#menu-main-menu .menu-item-has-children .sub-menu {
  position: absolute;
  left: 19px;
}

＆＃13;

<ul id="menu-main-menu">
  <li class="menu-item-has-children">
    <a href="http://localhost:8888/services/" class="">Services</a>
    <ul class="sub-menu">
      <li><a href="#" class="">Child Page</a></li>
      <li><a href="#" class="">Child Page</a></li>
      <li><a href="#" class="">Child Page</a></li>
    </ul>
  </li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您在问题中描述的问题无法使用您提供的代码重现。但是，根据您的解释，这里有两件事需要考虑：

• An initial value of a flex container is flex-shrink: 1。这意味着允许弹性项目缩小以适合容器内部（防止溢出）。要禁用收缩，请将flex-shrink: 0添加到弹性项目。

• Floats are ignored in a flex container.

此外，作为一般指导，请考虑以下规则：

• Absolutely positioned flex items do not participate in flex layout.

• A flex item cannot, by default, shrink past the size of its content

上述因素之一可能会导致或至少导致您的问题。