时间戳

首页 > 解决方案 > 绝对定位元素的最小和最大宽度

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

问题描述

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

* {
  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>

在元素上设置一个大的显式宽度，如 1000 像素，会a强制它们扩展，但我想阻止第一个子菜单扩展超过 150 像素的最小宽度。

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

标签： htmlcssnavigationnavbar

解决方案

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

推荐阅读