CSS偏斜问题 - 尽管存在相反的偏斜,但子元素倾斜

Question

我试图得到一个偏斜的导航,但链接正在与导航器倾斜.我理解代码应该工作,如果它是这样的:

#nav {
   transform: skew(-15deg);
}
#nav li {
   transform: skew(15deg);
}

但那不起作用.这是一个小提琴:http://jsfiddle.net/U5mq5/

再一次,我希望我的导航能够是直的,而不是倾斜的.救命？

Answer 1

CSS转换模块级别1

可转换元素是一个元素,其布局由CSS框模型控制,该框模型是块级或原子内联级元素,或者其显示属性计算为表行,表行组,表标题组,table-footer-group,table-cell或table-caption.

因此,元素的显示应该从改变inline为inline-block,以便skew()工作.另外,我添加white-space: nowrap了以防止文本换行到新行.

这里有更新的例子

#nav ul li {
    display: inline-block;
    padding: 0 0 0 3.5%;
    transform: skew(15deg);
    -webkit-transform: skew(15deg);
    white-space: nowrap;
}