CSS倾斜问题-尽管添加了相反的倾斜，但子元素倾斜

我试图得到一个倾斜的导航，但链接与导航是倾斜的。我理解，如果代码是这样的，那么代码应该可以工作：

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

但这不起作用。这是一把小提琴：

同样，我希望我的导航a是直的，而不是倾斜的。帮忙

可转换元素是指其布局由CSS框模型控制的元素，CSS框模型为块级或块级，或其显示属性计算为表行、表行组、表页眉组、表页脚组、表单元格或表标题

因此，元素的显示应该从

inline

更改为

inline block

，以便

skew（）

工作。此外，我还添加了

空白：nowrap

，以防止文本换行

---

成功了！非常感谢你！

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