垂直拉伸列表项目 [英] Vertically Stretch List Items

问题描述

我正在构建一个phonegap应用程序。我有以下内容：

 < ul> 
< li> One< / li> 
< li>两个< / li> 
< li>三< / li> 
< li>三个< br>一半< / li> 
< / ul> 
  

如何制作< li> 元素垂直拉伸并填充页面的整个高度，因为这需要是动态的，以适应其他视口。 < li> 元素中的文本需要垂直居中，并且支持多行。

有没有干净的方式做到这一点？

建议使用 display：table 系列CSS3规则。如果正确完成，它们将是动态的并保持全高度间距：

  body，html {
 height：100％ ; 
保证金：0; 
} 
 
 ul {
 list-style-type：none; 
保证金：0; 
 padding：0; 
 display：table; 
宽度：100％; 
身高：100％; 
} 
 
 ul li {
 display：table-row; 
} 
 
 ul li a {/ *假设是主播孩子。可以是任何* / 
 display：table-cell; 
 vertical-align：middle; 
填充：1em 3em; 
} 
  

演示： http://jsfiddle.net/6z3q35x0/1/

I am building a phonegap application. I have the following:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Three <br>a Half</li>
</ul>

How can I make the <li> elements stretch vertically and fill the whole height of the page given that this needs to be dynamic so that it adapts to other viewports. The text inside the <li> elements needs to be vertically centred and supports multiple lines.

Is there any clean way of doing this?

解决方案

I suggest using the display: table family of CSS3 rules. They'll be dynamic and maintain full height spacing if done correctly:

body, html {
    height: 100%;
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
}

ul li {
    display: table-row;
}

ul li a { /* assuming an anchor child.  Can be anything */
    display: table-cell;
    vertical-align: middle;
    padding: 1em 3em;
}

Demo: http://jsfiddle.net/6z3q35x0/1/

这篇关于垂直拉伸列表项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！