height：auto对<li>元素不起作用

Question

我一直试图解决这个布局问题一个小时左右没有运气。我只是希望我的li展开以匹配其内容的高度，以便margin-bottom正常工作。这是我的代码（注意：这只是一个草稿，所以相关的CSS混合在style属性中）：

<!-- This uses ASP.NET markup syntax but should still be legible to anyone -->
<h2>Related</h2>
    <ul class="list-unstyled owner-list">
        @foreach (var package in Model.RecommendedPackages)
        {
            <li style="position: relative; word-break: break-all; height: auto;">
                <a href="@Url.Package(package.Id)" title="@package.Id" target="_blank">
                    <img class="owner-image" aria-hidden="true" alt="" width="32" height="32"
                        src="@(PackageHelper.ShouldRenderUrl(package.IconUrl) ? package.IconUrl : Url.Absolute("~/Content/gallery/img/default-package-icon.svg"))"
                        @ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/default-package-icon-256x256.png"))
                        />
                </a>
                <div style="display: inline-block; position: absolute;">
                    <a href="@Url.Package(package.Id)" title="@package.Id" target="_blank" style="word-wrap: break-word;">@package.Id</a>
                </div>
            </li>
        }
    </ul>

结果如下：

以下是div内的li维度：

以下是li的尺寸，明显短于其子div：

我尝试使用height: auto;来修复此问题（如图所示），但它无法正常工作。我做错了吗？

Answer 1

这是因为你在相对定位的元素中有一个绝对定位的元素。如果您有一个绝对定位的元素，它不会占用包含非静态定位元素内的任何可视空间。

绝对元素是相对于它最近的非静态祖先定位的元素。

所以，如果你有一个固定的，相对的，粘性的或另一个绝对的元素祖先（外部元素），那么内部元素就不会占据那里的任何空间。

li元素从图像内部获得32 px高度，因为li将自动成为内容的高度，此外，它显式（并且不必要地）设置为auto。

您所描述的所需影响是默认值。外部元素的高度将自动适合内容。解决方案是要么没有放置位置，要么默认或明确地将位置设置为占用其祖先（静态，相对等）空间的属性。