высота: авто не работает на <li>элементах - PullRequest
Новая
       6

высота: авто не работает на <li>элементах

0 голосов
/ 18 мая 2018

Я пытался решить эту проблему макета в течение часа или около того, но не повезло.Я просто хочу, чтобы мой li расширился до высоты его содержимого, чтобы margin-bottom работал правильно.Вот мой код (примечание: это всего лишь черновик, поэтому соответствующий CSS смешивается с помощью style атрибутов): 

<!-- This uses ASP.NET markup syntax but should still be legible to anyone -->
<h2>Related</h2>
    <ul class="list-unstyled owner-list">
        @foreach (var package in Model.RecommendedPackages)
        {
            <li style="position: relative; word-break: break-all; height: auto;">
                <a href="@Url.Package(package.Id)" 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>
                <div style="display: inline-block; position: absolute;">
                    <a href="@Url.Package(package.Id)" title="@package.Id" target="_blank" style="word-wrap: break-word;">@package.Id</a>
                </div>
            </li>
        }
    </ul>

Вот результаты:

Вот размеры div внутри li:

Вотразмеры li, который явно короче, чем его дочерний элемент div:

Я попытался использовать height: auto;, чтобы исправить это (какВы можете видеть на картинке), но это не сработало.Я что-то не так делаю?

1 Ответ

0 голосов
/ 18 мая 2018

Это потому, что у вас есть абсолютно позиционированный элемент внутри относительно позиционированного элемента.Когда у вас есть абсолютно позиционированный элемент, он не занимает визуальное пространство внутри содержащего не статически позиционируемого элемента.

Абсолютный элемент - это элемент, расположенный относительно его ближайшего нестатического предка.

Так что, если у вас есть фиксированный, относительный, прикрепленный или другой предок абсолютного элемента (внешний элемент),внутренний элемент не будет занимать там места.

Элемент li получает высоту 32 пикселя от изображения внутри, так как li автоматически будет высотой содержимого, и, кроме того, это явно (иизлишне) установить на авто.

То, что вы описываете как желаемый эффект, используется по умолчанию.Высота внешнего элемента будет автоматически соответствовать содержимому.Решение состоит в том, чтобы либо не указывать позицию, и это будет по умолчанию или явно устанавливать позицию для атрибута, который занимает место в его предках (статический, относительный и т. Д.).

...