Question

I have a ul li a menu and want to skew the ul li but not the a. The ul li skews, but the a won't skew to normal position.

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

你不能扭曲内联元素，试试这个：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 3

你试图扭曲一个内联元素。变换只能应用于可变形元素，最常见的是块级元素。来自spec：

可转换元素是以下类别之一的元素：一个元素，其布局由CSS框模型控制，该模型是块级或原子内联级元素，或者其显示属性计算为表行，表行组，表标题组，表脚-group，table-cell或table-caption SVG命名空间中的一个元素，不受CSS框模型的控制，该模型具有属性transform，'patternTransform'或gradientTransform。

要将此设置a修改为display: inline-block;或简单display: block;

如何倾斜ul li而不是<a> in ul li a?

3 个答案: