Javascript 高度：自动在<；上不工作；李>；元素

我试图解决这个布局问题已经有一个多小时了，但运气不好。我只想让我的

li

展开以匹配其内容的高度，这样

margin-bottom

就能正常工作。这是我的代码（注意：这只是一个草稿，所以相关的CSS通过

style

attributes混入其中）：

相关的

@foreach（模型中的var包。推荐包）
{


}

结果如下：

以下是

li

内部

div

的尺寸：

以下是

li

的尺寸，它明显比其子

div

短：

---

我试着使用

height:auto

修复此问题（如图所示），但它不起作用。我做错了什么吗？

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

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

因此，如果您有一个固定的、相对的、粘性的或另一个绝对元素祖先（外部元素），那么内部元素将不会占用任何空间

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

---

您所描述的期望影响是默认的。外部元素的高度将自动适应内容。解决方案是不放置位置，这将默认或显式地将位置设置为一个属性，该属性在其祖先中占用空间（静态、相对等）。

CSS的其余部分在哪里？

li

是否在网格或flexbox中？我的意思是，它显然是在一个

ol

或

ul

的内部，但当它们被放入网格中或如何制作时，我会有奇怪的行为flex@flen我在代码中添加了

元素（第2行）。你可以在这里看到整个事情：啊哈，这就是为什么！我不敢相信我一再忽视了这一点。谢谢你的帮助，但我还有一个问题。我把

放在绝对位置li

正常运行，并且文本仍然显示在同一行吗？您在这里错过的最重要的一个词是元素从流中移除，这就是它的高度没有变化impact@TemaniAfif我知道。我不知道如何在不使用

position:absolute的情况下处理不同的问题<!-- 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>