height:auto在<li>元素不生效，如何让<li>自适应内容高度？

嘿，我一眼就找到你问题的根源啦！

你的<li>元素没法被内容撑开，核心原因是你给内部的<div>加了position: absolute;——绝对定位的元素会脱离正常的文档流，也就是说父元素<li>完全感知不到这个div的存在，哪怕你设置了height: auto;也没用，它只会根据仍在文档流里的图片来计算高度，自然就比实际内容矮很多。

推荐的修复方案：改用Flex布局 #

这是现在实现横向排列布局最简洁可靠的方式，既不用依赖绝对定位，还能轻松控制元素对齐和间距。你只需要调整<li>和内部<div>的样式：

<h2>Related</h2>
<ul class="list-unstyled owner-list">
@foreach (var package in Model.RecommendedPackages)
{
<li style="display: flex; align-items: center; gap: 8px; word-break: break-all;">
<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="word-wrap: break-word;">
<a href="@Url.Package(package.Id)" title="@package.Id" target="_blank">@package.Id</a>
</div>
</li>
}
</ul>

关键修改点说明：

• 给<li>添加display: flex;：让内部元素横向排列
• align-items: center;：保证图片和文字垂直居中对齐
• gap: 8px;：控制图片和文字之间的间距（你可以根据需求调整数值）
• 移除了<div>的position: absolute;：让它回到正常文档流里，这样<li>就能感知到它的高度，自动被内容撑开

这样修改后，<li>的高度会完全匹配内容高度，margin-bottom也能正常生效啦！

如果你一定要用绝对定位（不推荐） #

如果因为某些原因必须保留绝对定位，你需要手动给<li>设置足够的padding-bottom来容纳绝对定位的内容，或者指定固定高度，但这种方式很不灵活，一旦内容长度变化就会出问题，所以还是优先选择Flex布局哦～

内容的提问来源于stack exchange，提问作者James Ko