Html CSS无法取消倾斜文本问题

我试图创建与拉直文本倾斜链接。尽管做了大量的修改，我还是无法解开文本的歪斜。以下是我正在使用的HTML代码：

<div class="menu">
    <div class="row">
        <div class="col-md-6">
            <h1>Photography</h1>
        </div>
        <div class="col-md-6">
            <ul>
                <li class="skew"><a class="skew-fix">Work</a></li>
                <li class="skew"><a class="skew-fix">Shop</a></li>
                <li class="skew"><a class="skew-fix">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

有人能确定我做错了什么吗？

transform对链接等内联元素不起作用

使它们成为内联块或内联块

.菜单{ 高度：90px； 边框底部：1px纯黑； 填充：0 50px； } .菜单h1{ 线高：90px； 保证金：0； } .歪斜{ 保证金：5px0； 显示：内联块； 字体大小：25px； 填充：0 18px； 浮动：对； 线高：80px； 变换：X-20度； 背景：粉红色； } .歪斜固定{ 变换：斜20度； 显示：块； } 照相术 工作 商店 联系 转换不适用于链接之类的内联元素

使它们成为内联块或内联块

.菜单{ 高度：90px； 边框底部：1px纯黑； 填充：0 50px； } .菜单h1{ 线高：90px； 保证金：0； } .歪斜{ 保证金：5px0； 显示：内联块； 字体大小：25px； 填充：0 18px； 浮动：对； 线高：80px； 变换：X-20度； 背景：粉红色； } .歪斜固定{ 变换：斜20度； 显示：块； } 照相术 工作 商店 联系

---

明亮的成功了。感谢您的洞察力和快速解决方案。太棒了！成功了。感谢您的洞察力和快速解决方案。

.menu {
    height: 90px;
    border-bottom: 1px solid black;
    padding: 0 50px;
}
.menu h1 {
    line-height: 90px;
    margin: 0;
}
.skew {
    margin: 5px 0;
    display: inline-block;
    font-size: 25px;
    padding: 0 18px;
    float: right;
    line-height: 80px;
    transform: skewX(-20deg);
}
.skew-fix {
    transform: skewX(20deg);
}