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

【问题标题】：min- and max-width of absolutely positioned element绝对定位元素的最小和最大宽度
【发布时间】：2018-08-22 17:43:39
【问题描述】：

我有一个标准导航菜单，其中一些项目有子菜单。我希望子菜单具有最小宽度和最大宽度。例如，子项至少有 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 元素上设置较大的显式宽度（例如 1000 像素）会强制它们展开，但我希望第一个子菜单不会超过 150 像素的最小宽度。

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

【问题讨论】：

标签： html css navigation navbar

【解决方案1】：

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

【讨论】：

【解决方案2】：

所以根据文本内容长度动态改变列表项的宽度并保持最小宽度：150px的要求；和最大宽度：250px；以下作品：

1) 移除最小宽度：150px； & 最大宽度：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 不支持 max-content。所以这取决于这方面对你有多重要。请记住，这些浏览器将来可能会支持它。

正如您提到的，由于现有的 css，子元素不希望大于父元素，因此如果您保持绝对定位，则还需要动态更改父元素的大小。

1) 移除最小宽度：150px； & 最大宽度：250px； from .sub-menu a [和以前一样] 2）添加

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

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

希望这会有所帮助。

【讨论】：