时间戳

首页 > 解决方案 > 如何在不使用 position: absolute 的情况下强制 div 保持在同一行？

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

问题描述

我正在尝试将图像元素与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>

结果是：

因为我希望锚文本从同一行开始，所以我在这里使用了修复并应用于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;">

结果是：

现在这仍然不能令人满意，因为它没有调整 s 的高度li以响应换行的文本，因此如上所示， margin-bottombetween lis 无法正常工作。有关更多信息，请参阅此答案。

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

标签： javascripthtmlasp.netcss

解决方案

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

position: relative;
display: inline-block;

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

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

推荐阅读