javascript - 如何在没有硬编码维度的情况下扩展包含位置相对/绝对子项的 UL 元素？

Question

我正在尝试根据可用空间扩展元素。该元素包含图像，但我一无所获...<​​/p>

我的 HTML:

 <ul>
  <li>
   <a>
    <img>
   </a>
  </li>
 </ul>

使用以下 CSS，ul 展开全宽 (ok)，但没有设置高度:

ul {
  height: inherit;
  list-style: none outside none;
  overflow: hidden;
  position: relative;
  width: auto;
  /* cheating: min-height: 10em; */
}
li {
  display: block;
  height: inherit;
  list-style: none outside none;
  overflow: inherit;
  position: absolute;
  width: 100%;
}
a {
  height: inherit;
  overflow: auto;
  width: inherit;
}
img {
  height: inherit;
  display: table-row-group;
  float: left;
  width: 100%;
}

问题:
有没有一种 CSS 方法可以将 ul 的高度设置为包含的图像的高度？我可以作弊并在 ul 上设置 min-height 但这确实不是一个选项。 Position 也必须保留。

谢谢

Answer 1

问题是您在内部 li 上设置了绝对位置。解决这个问题的方法是添加:

overflow: hidden;

到ul的风格