CSS中心鏈接和填充欄到頁尾

Question

我正在嘗試垂直對齊我的導航欄中的文本。

我試過使用垂直對齊。但它不工作。

我也確定它有高度，實際上內部對齊。

另外，有沒有辦法以填充導航欄到頁面末尾，一個parallogram /矩形。這樣鏈接的右側就沒有空白了。所以它實際上是一個長條形，由平行四邊形分割。

http://jsfiddle.net/Z4kUm/

<ul id="navlist"> 
         <li><a><span>Link</span></a></li> 
         <li><a><span>Link</span></a></li> 
         <li><a><span>Link</span></a></li> 
         <li><a><span>Link</span></a></li> 
        </ul> 

我的CSS：

ul#navlist { 
    padding:10px; 
    font: bold 12px Arial, sans-serif; 
    display: inline; 
} 

ul#navlist li { 
    float:left; 
    margin-right:20px; 
    display:inline-block; 
    zoom:1; 
    position:relative; 
    width:125px; 
    height: 50px; 
    list-style: none; 
    color:#757575; 
} 

ul#navlist li a { 
    display: inline-block; 
    vertical-align: middle; 
    text-decoration:none; 
    padding:5px 10px; 
    transform: skewX(-20deg); 
    -o-transform: skewX(-20deg); 
    -moz-transform: skewX(-20deg); 
    -webkit-transform: skewX(-20deg); 
    width:115px; 
    height: 40px; 

} 

ul#navlist li a span 
{ 
    width: 100%; 
    height: 40px; 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
    transform: skewX(20deg); 
    -o-transform: skewX(20deg); 
    -moz-transform: skewX(20deg); 
    -webkit-transform: skewX(20deg); 
} 

ul#navlist li a { 
    background:#AAA; 
} 

Answer 1

設置line-height財產上的跨度，以滿足他們的高度。

jsFiddle example

ul#navlist li a span 
{ 
    width: 100%; 
    height: 40px; 
    line-height:40px; 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
    transform: skewX(20deg); 
    -o-transform: skewX(20deg); 
    -moz-transform: skewX(20deg); 
    -webkit-transform: skewX(20deg); 
}