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

Question

我正试图获得一个偏斜的导航，但链接正在与导航器倾斜。我理解代码应该有效，如果它是这样的：

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

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

同样，我希望我的导航设备是直的，而不是倾斜的。帮助

Answer 1

  

CSS Transforms Module Level 1

     

可转换元素是一个元素，其布局由CSS框模型控制，该模型是块级或atomic inline-level element，或者其显示属性计算为表行，表行组，表格 - header-group，table-footer-group，table-cell或table-caption。

因此，元素的显示应从inline更改为inline-block，以便skew()能够正常工作。另外，我添加了white-space: nowrap以防止文本换行到新行。

UPDATED EXAMPLE HERE

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