如何倾斜 ul li 而不是 ul li a 中的 <a>？ [复制]答案

【问题标题】：How to skew a ul li but not the <a> in ul li a? [duplicate]如何倾斜 ul li 而不是 ul li a 中的 <a>？ [复制]
【发布时间】：2018-03-25 22:16:48
【问题描述】：

我有一个ul li a 菜单并且想要倾斜ul li 而不是a。 ul li 倾斜，但 a 不会倾斜到正常位置。

header ul li {
    display: inline-block;
    background: #f5c207;
    padding: 10px 20px;
    margin-left: 10px;
    transform: skew(-20deg);
}
header ul li a {
    transform: skew(20deg);
}

<div id="top" class="container">
    <ul>
        <li><a href="">About us</a></li>
        <li><a href="">Other</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</div>

【问题讨论】：

在 mac 和 google chrome 上对我来说看起来不错...
不适合我（也适用于 Mac 和 Google Chrome）。 OP.. 可能使用 :after 作为背景。
@Blazemonger 请不要更改代码；这可能正是他的问题所在
他说它歪了，但不会歪回来。如果根本不应用 CSS，就不会发生这种情况。
@Blazemonger 我知道，但提供他拥有的代码是 OP 的责任；猜测不是你的责任。

标签： css css-transforms skew

【解决方案1】：

你不能倾斜内联元素，试试这个：

header ul li {
    display: inline-block;
    background: #f5c207;
    padding: 10px 20px;
    margin-left: 10px;
    transform: skew(-20deg);
}
header ul li a {
    display:inline-block;
    transform: skew(20deg);
}

<header id="top" class="container">
    <ul>
        <li><a href="">About us</a></li>
        <li><a href="">Other</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</header>

【讨论】：

还有另一种方法可以做到这一点。我们可以使用伪类而不是更改为元素。我们可以使用这段代码。 header ul li { display: inline-block;填充：10px 20px；左边距：10px；位置：相对； } header ul li:before { background: #000;宽度：100%；高度：100%；位置：绝对；顶部：0；左：0；内容： ””; z 指数：-1； } header ul li a { display:inline-block;颜色：#fff; }

【解决方案2】：

您需要将display: block（或inline-block）添加到列表项内的a。

header ul li {
  display: inline-block;
  background: #f5c207;
  padding: 10px 20px;
  margin-left: 10px;
  transform: skew(-20deg);
}

header ul li a {
  display: block;
  transform: skew(20deg);
}

<header id="top" class="container">
  <ul>
    <li><a href="">About us</a></li>
    <li><a href="">Other</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</header>

【讨论】：

【解决方案3】：

您正在尝试倾斜内联元素。变换只能应用于可变换元素，最常见的是块级元素。来自spec：

可变形元素是属于以下类别之一的元素：一个元素，其布局由 CSS 框模型控制，它是块级或原子内联级元素，或者其显示属性计算为 table-row、table-row-group、table-header-group、table-footer -group、table-cell 或 table-caption SVG 命名空间中的一个元素，不受具有属性 transform、‘patternTransform’ 或 gradientTransform 的 CSS 盒子模型的约束。

将这组a 修复为display: inline-block; 或简单地display: block;

【讨论】：