如何在ul li a中倾斜ul li而不是<a>？

我有一个ul li a菜单，并且想要倾斜ul li而不是a。 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>

来源

2017-10-13 Mehdi Yaghoubi

在Mac和谷歌Chrome它看起来好像没什么问题... – Jesus

不适合我（也苹果和谷歌Chrome）。 OP ..也许使用'：after'作为背景。 – putvande

@Blazemonger请不要更改代码;这可能正是他的问题 – TylerH

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

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>

来源

2017-10-13 18:08:41 Dale

还有另一种方法可以做到这一点。我们可以使用伪类来更改元素。我们可以使用这个代码。 header ul li display：inline-block; padding：10px 20px; margin-left：10px; 位置：相对; } header ul li：before { background：＃000; 宽度：100％; 身高：100％; position：absolute; top：0; left：0; 内容：“”; z-index：-1; } header ul li a display：inline-block; color：#fff; } –

您需要添加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>

来源

2017-10-13 18:08:44 Blazemonger

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

一种可变形元件是在这些类别之一的元素：的元件，其布局由CSS盒模型，其可以是一个块级或原子行内元素，或支配其显示属性计算为SVG名称空间中的一个元素，并且不受CSS盒模型的控制，该表格行，表行组，表标题组，表标题组，表标题组，表格标题组或表标题其中有属性转换，'patternTransform'或gradientTransform。

为了解决这个问题设置a到display: inline-block;或者干脆display: block;

来源

2017-10-13 18:12:23 CyberAP

如何在ul li a中倾斜ul li而不是<a>？

回答

相关问题