jquery - -webkit-transform 不带 float 属性的旋转

Question

我尝试使用双直 Angular 引号 ( » ) 作为下拉指示器。我让它在我的导航中工作，其中有 float: right;分配给它。然而，在导航之外，当我没有 float: 时分配给它，它不会旋转。我通过添加类 down 使用 jQuery 和 CSS3 旋转箭头到<span>包含直 Angular 引号的元素。

这是 down添加用于旋转箭头的 css 类:

.drop-arrows.down {
    /* FF Chrome Opera etc */
    -webkit-transform: rotate(90deg) !important; 
    -moz-transform: rotate(90deg) !important;
    -o-transform: rotate(90deg) !important;
    /* IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

该类是在通过 jQuery 激活下拉列表时添加的。唯一的问题是，如果没有float，这将无法工作。也添加到箭头容器中，这让我很困惑。

这是包裹箭头的 HTML:

<a id='filter-trigger' href='javascript:void(0);'>FILTERS <span class='drop-arrows'>&raquo;</span></a>

是-webkit-transform需要浮子才能工作吗？我做错了什么吗？

Answer 1

您需要设置绝对位置

.drop-arrows {
    position: absolute;
    /* FF Chrome Opera etc */
    -webkit-transform: rotate(90deg) !important; 
    -moz-transform: rotate(90deg) !important;
    -o-transform: rotate(90deg) !important;
    /* IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}