Как заставить force div оставаться на одной строке, не используя 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>

привело к этому:

Так как я хотел, чтобы текст привязки начинался на той же строке, я использовал исправление здесь и применили 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 работает неправильно, как вы можете видеть выше.См. этот ответ для получения дополнительной информации.

С одной стороны, мне нужен position: absolute;, чтобы текст на изображении был в одной строке.С другой стороны, у меня не может быть position: absolute;, поскольку он заставляет div не занимать места в потоке документов, в результате чего li не расширяется, в результате чего margin-bottom на liне работать правильно.Как мне справиться с этим?

Answer 1

Для каждого дочернего элемента, который должен быть выровнен по горизонтали, установите для css значение:

position: relative;
display: inline-block;

Если вам необходимо настроить вертикальное выравнивание дочерних элементов, вы можете использовать свойство vertical-align.

Вы также можете использовать display: flex для родительского элемента в качестве более простого исправления.

Answer 2

use display: свойство flex для тех дочерних элементов div, которые должны находиться в одной строке.

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