Question

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

我尝试过应用display:block，float:left，height:100%以及我发现的其他一些建议，但较短的<li>项目的高度不会高于<li> <li>个项目。所以我在较短的{{1}}项下面留下了一个空格。有人对此有任何建议吗？

Answer 1

在这种情况下，当您设置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%;
}

如果你想让它延伸到浏览器窗口的整个高度，那么你需要将你的CSS中的html，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%;
}

以下是您可能想要查看的其他一些链接：

Answer 2

一个简单的解决方法是在ul元素上添加display:table。 hieght将与内容保持一致。

Answer 3

如果您更改容器ul的list-style-position

，可能会解决此问题

<li>不会占用父<ul> </ul> </li>的100％高度

3 个答案: