如何在不使用位置的情况下强制 div 保持在同一行：绝对？

Question

我正在尝试将图像元素与li 内的锚元素并排放置。如果锚元素的文本很长，它应该换行并从与锚的第一行相同的水平偏移开始。

我的第一次尝试：

<h2>Related</h2>
<ul class="list-unstyled owner-list">
    @foreach (var package in Model.RecommendedPackages)
    {
        <li>
            <a href="@Url.Package(package)" 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>
            <a href="@Url.Package(package)" title="@package.Id" target="_blank">@package.Id</a>
        </li>
    }
</ul>

导致：

由于我希望锚文本从同一行开始，我使用了修复 here 并将 position: absolute; 应用于第二个锚：

<li style="position: relative;">
    ...
    <a href="@Url.Package(package)" title="@package.Id" target="_blank" style="position: absolute;">@package.Id</a>
</li>

导致：

然后我添加了自动换行：

<li style="position: relative; word-break: break-all;">

导致：

现在这仍然不令人满意，因为它没有调整li 的高度以响应换行的文本，所以lis 之间的margin-bottom 无法正常工作正如你在上面看到的。有关更多信息，请参阅this answer。

一方面，我需要position: absolute; 以便将图像上的文本保持在同一行。另一方面，我不能拥有position: absolute;，因为它会导致div 不占用文档流中的任何空间，导致li 无法扩展，导致li 上的margin-bottom s 不能正常工作。我该如何处理？

Answer 1

对需要在同一行的子 div 使用 display:flex 属性。

https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

对于每个需要水平对齐的子元素，设置css为：

position: relative;
display: inline-block;

如果需要调整子元素的垂直对齐方式，可以使用vertical-align属性。

您也可以在 parent 元素上使用 display: flex 作为更简单的解决方法。