Question

我有一个网站，基本上由5个列表项组成。说我的身体的宽度和高度是400px。我希望能够在整个身高上传播列表中的项目（无论身高的值是多少）。

我正在查看line-height属性，但我似乎无法弄清楚如何正确使用它。如果我将margin的{{1}}属性更改为li，则列表项会稍微展开。输入保证金的％值会超出屏幕限制的列表范围。

如何在整个屏幕上展开列表项，无论屏幕的高度是多少？

HTML文件：

1em 0;

CSS文件：

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="style.css" type="text/css" media="screen, mobile" />

        <title>Test</title>
    </head>
    <body>
        <division id="container">
            <ul>
                <li><label id="namelabel">Naam</li>
                <li><img id="photo" src="" /></li>
                <li><label id="price">12.29</label></li>
                <li><label id="deltime">3</label></li>
                <li><img id="logo" src="x.png"/></li>
            </ul>
        </divion>
    </body>
</html>

Answer 1

html {height:100%;}
body {height:100%; margin:0; padding:0;}
ul {list-style-type:none; height:100%; margin:0; padding:0;}
li {height:20%; margin:0; padding:0;}

http://jsfiddle.net/WrJvA/

Answer 2

以下内容可能与您的需求接近：

#container {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    border: 1px dotted blue;
}

ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
    height: inherit;
}
li {
    margin: 0;
    padding: 0;
    height: 20%;
}
li:nth-child(even) {
        background-color: beige;
}

#logo {
    vertical-align: top;
    width: auto;
    height: 100%;
}

容器块设置高度，您希望通过继承将该高度传递到ul，然后将li传递给20％，因为您有5个元素。

我将<division>代码更改为<div>（也许您打算<section>代替）。

请参阅演示：http://jsfiddle.net/audetwebdesign/gwh9L/

请注意在ul和li上清零边距和填充，否则会出现额外的空白问题。

您也可以根据需要将其缩放到视口。

将行高设置为屏幕的百分比

2 个答案: