Html CSS中心链接和填充栏到页面末尾

我正在尝试将导航栏内的文本垂直对齐

我试过使用垂直对齐。但它不起作用

我还确保它的高度与内部对齐

另外，是否有方法将导航栏填充到页面的末尾，即一个平行图/矩形。所以在链接的右边并没有空白。所以它实际上是一根长杆，被平行线分开

---

在跨距上设置

线高度

属性以匹配其高度

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);
}

---

“显示：表格单元格”可能会有所帮助，但在IE7或更低版本上不起作用。非常感谢！你知道如何将该条扩展到页面的末尾（而不是作为链接）吗？我想你需要更改列表项的宽度，这取决于你希望它看起来是什么样子。

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;
}

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);
}