如何让force divs保持在同一条线而不使用position：absolute？

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的高度，因此在margin-bottom之间li如上所示，s无法正常工作。有关详细信息，请参阅this answer。

一方面，我需要position: absolute;才能使图像上的文字保持在同一条线上。另一方面，我不能拥有position: absolute;，因为它导致div不占用文档流中的任何空间，导致li不展开，导致{{ 1 {} margin-bottom上无法正常工作。我该如何处理？

Answer 1

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

position: relative;
display: inline-block;

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

您还可以在父元素上使用display: flex作为更简单的修复。

Answer 2

对那些需要在同一行上的子div使用display：flex属性。

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