高度：自动不适用于< li>分子 [英] height: auto does not work on <li> elements

问题描述

我一直试图解决这个布局问题一个小时左右，没有运气。我只是希望我的 li 展开以匹配其内容的高度，以便 margin-bottom 能够正常工作。这里是我的代码（注意：这只是一个草稿，所以相关的CSS通过 style 属性混合在一起）：

 <！ - 这使用ASP.NET标记语法，但对任何人都应该清晰可读 - > 
< h2>相关< / h2> 
< ul class =list-unstyled owner-list> 
 @foreach（Model.RecommendedPackages中的var包）
 {
< li style =position：relative; word-break：break-all; height：auto;> 
< a href =@ Url.Package（package.Id）title =@ package.Idtarget =_ blank> 
将IMG类= 所有者图像 咏叹调隐藏= 真 ALT =  宽度= 32 高度= 32 
 SRC =@（PackageHelper.ShouldRenderUrl（包。 IconUrl）package.IconUrl：Url.Absolute（ 〜/内容/画廊/ IMG /默认包icon.svg）） 
 @ ViewHelpers.ImageFallback（Url.Absolute（ 〜/内容/画廊/img/default-package-icon-256x256.png））
 /> 
< / a> 
< div style =display：inline-block; position：absolute;> 
  
 
 
 
以下是中 div  li ：
 
 
 
  
 
 
 
这里是 li 的维数，明显小于其子 div ：
 
 
 
  
 
 
 
我尝试使用 height：auto; 来修复这（正如你在图片中看到的那样），但它不起作用。我做错了什么？
解决方案
这是因为你在一个相对定位的元素中有一个绝对定位的元素。当你有一个绝对定位的元素时，它不会占用包含非静态定位元素的任何可视空间。 
 
 
 
绝对元素是相对于其最近的非静态祖先而定位的元素。
所以，如果你有一个固定的，相对的，粘性的，或另一个绝对元素祖先（外部元素），内部元素不会占用任何空间。
 
 
 
 li元素获取32像素高度从图像里面，因为李将自动成为内容的高度，此外，它是明确（不必要地）设置为自动。
 
 
 
你描述为期望的影响是默认的。外部元件的高度将自动适合内容。解决方案是要么没有放置位置，而是默认或明确地将位置设置为在其祖先中占用空间的属性（静态，相对等）。
 
I've been trying to fix this layout problem for an hour or so with no luck. I simply want my li to expand to match the height of its contents, so that margin-bottom will work correctly. Here's my code (note: this is just a draft, so the relevant CSS is mixed in via style attributes):
<!-- 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>
Here are the results:



Here are the dimensions of the div inside the li:



Here are the dimensions of the li, which is clearly shorter than its child div:



I tried using height: auto; to fix this (as you can see in the picture) but it didn't work. Am I doing anything wrong?
解决方案
It's because you have an absolutely positioned element inside of a relatively positioned element. When you have an absolutely positioned element, it doesn't take up any visual space inside the containing non-statically positioned element. 

An absolute element is an element positioned relative to it's nearest non-static ancestor.

So, if you have a fixed, relative, sticky, or another absolute element ancestor (outer element), the inner element won't take up any space there.

The li element gets the 32 px height from the image inside, since li will automatically be the height of the contents, and additionally, it is explicitly (and unnecessarily) set to auto.

What you describe as the desired affect is the default. The height of the outer element will automatically fit the contents. The solution is to either put no position, and that will default or explicitly set position to a attribute that does take up space in its ancestors (static, relative, etc.).

                        
这篇关于高度：自动不适用于&lt; li&gt;分子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！