javascript - 如何在不使用位置 : absolute? 的情况下强制 div 保持在同一行

Question

我试图在 li 中并排放置一个图像元素和一个 anchor 元素。 .如果 anchor 元素的文本很长，它应该换行并从与 anchor 元素第一行相同的水平偏移量开始。

我的第一次尝试:

<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>

结果是:

因为我希望 anchor 文本在同一行开始，所以我使用了修复 here并应用 position: absolute;到第二个 anchor :

<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不扩展，导致margin-bottom在 li 上不能正常工作。我该如何处理？

Answer 1

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

position: relative;
display: inline-block;

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

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