18

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

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

4

3 回答 3

15

在这种情况下，当您设置 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、body 在你的 css 中的高度设置为 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%;
}

以下是您可能想要查看的其他一些链接，这些链接讨论了这个问题：

于 2013-06-26T18:20:15.653 回答
2

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

于 2015-06-17T07:51:31.953 回答
0

list-style-position如果你改变容器 ul，也许它会解决

于 2013-06-26T15:58:20.277 回答