html - 应用负偏斜不会对内部HTML产生影响

<div class="navbar-wrapper">
    <div id="navbar" class="navbar">
        <ul>
            <li><a id="unskew" href="">Home</a></li>
            <li><a id="unskew" href="">Prices</a></li>
            <li><a id="unskew" href="">About Me</a></li>
            <li><a id="unskew" href="">Contact</a></li>
        </ul>
    </div>
</div>`

我正在尝试使用负偏斜来使文本变直，但是即使我仅使用负偏斜本身也不起作用，但它没有改变。

#unskew
{
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    transform: skew(-10deg);
}

ul li
{
    transform: skew(10deg);
}

最佳答案

CSS Transforms Module Level 1
  
  可转换元素是其布局由CSS框模型控制的元素，该CSS框模型可以是块级或atomic inline-level element，或者其显示属性可以计算为table-row，table-row-group，table-header-group，table -页脚组，表格单元格或表格标题。


锚元素默认为inline，因此不应用偏斜变换。

您可以将锚元素的display更改为inline-block。这样，将应用偏斜变换。

Example Here

#unskew {
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    transform: skew(-10deg);
    display: inline-block;
}

边注：


作为Jonathon points out in the comments，您应该使用类而不是id，因为id必须是唯一的并且不能重复。

关于html - 应用负偏斜不会对内部HTML产生影响，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28652749/