<li> 不会占用父级 <ul> 的 100% 高度

Posted 2023-03-06

【中文标题】<li> 不会占用父级 <ul> 的 100% 高度

【英文标题】：<li> will not take 100% height of the parent <ul>

【发布时间】：2013-06-23 16:27:39

【问题描述】：

我有一个<ul>，其中有几个<li> 项目在一行中。 <li> 有一个嵌套的<span> 和一个<img>。 <img> 高度在所有项目中都是相同的。但是<span> 项目包含可以跨越单行或两行的文本（取决于文本）。

我已尝试应用 display:block、float:left、height:100% 以及我发现的其他一些建议，但较短的 <li> 项目与较高的 <li> 项目的高度不同。所以我在较短的<li> 项目下方留有一个空格。 有人对此有什么建议吗？

【问题讨论】：

你能给我们看一个html/css的例子吗？

请使用jsfiddle.net创建demo

为此设置一个Fiddle，人们会更容易帮助你：jsfiddle.net

您是否尝试过height:150px 或任何预期的最大高度？

你好，这里是小提琴：jsfiddle.net/KingsInnerSoul/DEnwQ/16。您可以看到其中两个 项目如何跨越整个高度。我怎样才能做到这一点？ @Sable，我不想硬编码高度，因为每个项目的跨度文本长度是未知的。

【参考方案1】：

如果您更改容器 ul 的 list-style-position 可能会修复

【讨论】：

刚内外都试过了，没用。不过谢谢

【参考方案2】：

在这种情况下，当您设置 height:100% 时，它不会从其父级继承任何高度。如果您希望列表项的高度为 div #wrapper 的 100%，那么您应该将 ul 的高度设置为 100%，并在 div #wrapper 上设置一个高度（以像素或 em 为单位）：

http://jsfiddle.net/SF9Za/1/

#wrapper 
    background: transparent;
    width: 350px;
    color: white;
    height:250px;

#wrapper ul 
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;

如果你想让它伸展到浏览器窗口的整个高度，那么你需要将 html 的高度、css 中的 body 设置为 100%，然后将所有元素向下设置为 li (html 、body、div#wrapper、ul.list 和 li) 的高度必须为 100%：

http://jsfiddle.net/YdGra/

html, body
    height:100%;
    margin:0;
    padding:0;

#wrapper 
    background: transparent;
    width: 350px;
    color: white;
    height:100%;

#wrapper ul 
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;

这里有一些您可能想查看的其他链接，讨论这个问题：

CSS 100% height layout Setting height: 100% on my label element doesn't work http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

【讨论】：

还有其他方法可以获得 100% 吗？因为我仍然会硬编码总高度。有没有办法从浏览器获取总高度？我的意思是浏览器为每个<li> 分配空间并最终包装<ul> 高度。那么我们不能以某种方式“窃取”那个高度值吗？

我所知道的唯一其他方法是使用 javascript 来获取高度：jsfiddle.net/pDW5q 这是你的小提琴的一个例子：jsfiddle.net/n4peG

【参考方案3】：

一个简单的解决方法是在你的 ul 元素上添加display:table。高度将与内容对齐。