Question

我有一个标准的导航菜单，其中一些项目带有子菜单。我希望子菜单具有最小宽度和最大宽度。例如，子项的宽度至少为150px，并且在折断多行之前可以增长到250px。但是，由于子菜单绝对位于相对位置的元素内，因此子项在多行中断之前不会扩展到最大最大宽度：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
}

nav > ul {
  font-size: 0;
}

nav > ul > li {
  position: relative;
  display: inline-block;
  font-size: 1rem;
}

nav > ul > li > a {
  display: block;
  padding: 1em;
  background-color: black;
  color: white;
}

.sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
}

.sub-menu a {
  display: block;
  padding: 1em;
  color: white;
  background-color: red;
  min-width: 150px;
  max-width: 250px;
}

<nav>
  <ul>
    <li>
      <a>Line Item 1</a>
      <ul class="sub-menu">
        <li>
          <a>Sub Item 1</a>
        </li>
        <li>
          <a>Sub Item 2</a>
        </li>
        <li>
          <a>Sub Item 3</a>
        </li>
        <li>
          <a>Sub Item 4</a>
        </li>
      </ul>
    </li>
    <li>
      <a>Line Item 2</a>
    </li>
    <li>
      <a>Line Item 3</a>
      <ul class="sub-menu">
        <li>
          <a>Sub Item 1</a>
        </li>
        <li>
          <a>Sub Item 2</a>
        </li>
        <li>
          <a>Long Sub Item 3 forcing sub menu to expand</a>
        </li>
        <li>
          <a>Sub Item 4</a>
        </li>
      </ul>
    </li>
    <li>
      <a>Line Item 4</a>
    </li>
  </ul>
</nav>

在a元素上设置一个较大的显式宽度（例如1000px），迫使它们展开，但是我想防止第一个子菜单扩展到超过150px的最小宽度。

如何将第一个子菜单保持在150像素，而将第二个扩展到250像素？

Answer 1

尝试将width: max-content添加到.sub-menu。这应该允许它扩展。

Answer 2

以便根据文本内容的长度动态更改列表项的宽度，并保持min-width：150px的要求；和max-width：250px;以下作品：

1）删除最小宽度：150px；＆max-width：250px;来自.sub-menu a

2）添加此内容：

.sub-menu {
  width:max-content;
  width:-webkit-max-content;
  width:-moz-max-content;
  max-width:250px;
  min-width:150px;
}

但是，IE，EDGE或Opera Mini不支持最大内容。因此，这取决于该方面对您有多重要。请记住，将来这些浏览器可能会支持它。

如前所述，由于现有的CSS，子元素不想大于父元素，因此，如果保持绝对位置，则还需要动态更改父元素的大小。

1）删除最小宽度：150px；＆max-width：250px;来自.sub-menu a [与以前相同] 2）添加

ul li {
  width:100%; 
  max-width:250px;
  min-width:150px;
}

工作示例[其中包含两种解决方案，但是您需要注释掉/取消注释指示的位置] = https://codepen.io/FEARtheMoose/pen/GXJzaV

希望这会有所帮助。

绝对定位元素的最小和最大宽度

2 个答案: