旋转span标签时出现问题

Question

我有以下内联CSS，但我无法使用静态位置旋转箭头。

我需要旋转HTML箭头。如何解决？

注意：如果可能，我希望不要使用position: absolute。

＆＃13;

＆＃13;

<span style="transform: rotate(57deg);">➤</span>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请参阅the spec：

  

适用于：可转换元素

     

可转换元素是以下类别之一的元素：

     

  
• 一个元素，其布局由CSS框模型控制，该模型是块级或原子内联级元素，或者其显示   property计算到table-row，table-row-group，table-header-group，   table-footer-group，table-cell或table-caption [CSS21]
  
• SVG名称空间中的一个元素，不受CSS框模型的控制，该框模型具有属性transform，patternTransform或   gradientTransform [SVG11]。
  

您使用的是跨度，这不是SVG，因此其中第二个不适用。

默认情况下，范围为display: inline，因此它也不匹配任何第一类别选项。

将display属性设置为列为可接受的值之一。

＆＃13;

＆＃13;

body { margin-top: 70px; }

＆＃13;

<span style="transform: rotate(57deg); display: block; width: 20px; outline: solid red 1px;">➤</span>

＆＃13;

＆＃13;

＆＃13;