0

我有一个网站，它基本上由 5 个列表项组成。假设我的身体的宽度和高度是 400px。我希望能够将列表中的项目分布在整个身体高度上（不管身体高度的值是多少）。

我正在调查该line-height物业，但我似乎无法弄清楚如何正确使用它。如果我更改to的margin属性，列表项会分散一点。为边距输入 % 值会使列表展开超出屏幕限制。li1em 0;

无论屏幕高度如何，如何将列表项分布在整个屏幕上？

HTML 文件：

<!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>

CSS 文件：

body {
    width: 400px;
    height: 400px;
}

ul {
    list-style-type: none;
    text-align: center;
}

li {

    margin: 100%;
    margin: 1em 0;
}

#container {
}

#logo {
    width: 150px;
    height: 100px;
}
4

2 回答 2

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/

于 2013-09-10T19:05:04.813 回答
1

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

#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通过继承传递到，然后传递到li20%，因为您有 5 个元素。

我将<division>标签更改为<div>（也许您打算<section>改为）。

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

ul在and上注意将边距和填充归零li，否则额外的空白会成为问题。

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

于 2013-09-10T19:15:00.910 回答