如何偏斜一个ul，而不是<a>在ul？

Question

我有一个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>

​

Answer 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>

​

Answer 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>

​

Answer 3

你在试图扭曲一个内联元素。转换只能应用于可转换元素，最常见的是块级元素.来自等级库

可转换元素是其中一个类别中的元素:其布局由CSS框模型控制的元素，该模型要么是块级元素，要么是原子内联级元素，或者其显示属性计算到表行、表行组、表标头组、表页脚组、表单元格或表标题-- SVG命名空间中的一个元素，而不受具有转换属性、“patternTransform”或gradientTransform属性的CSS框模型的控制。

将此集a修正为display: inline-block;或简单的display: block;