如何在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>？

回答

相關問題