0

我试图制作我的导航栏，以便每个页面都有一个图标，图标旁边的文本旋转 90*。由于某种原因，这不起作用。有什么想法吗？我知道我需要 -ms- 和 -webkit- 调整，但我现在在 Firefox 中测试它并且它不起作用。

<span style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;display:inline;float:left;">JOE'S DINER</span>
    <div id="navbar"><span id="icon"> &#xf015 </span><div style="transform:rotate(90deg);display:inline;">Home</div></div> 
    <div id="navbar"><span id="icon"> &#xf083 </span><br/>Menu</div>
    <div id="navbar"><span id="icon"> &#xf091 </span><br/>Pics</div>
    <div id="navbar"><span id="icon"> &#xf007 </span><br/>Foodie Blog</div> 
    <div id="navbar"><span id="icon"> &#xf0e0 </span><br/>Contact Us</div>

这是ids的css

#navbar{
display:inline;
float:left;
font-size:10px;
text-align:center;
}   

#icon{
font-family: 'FontAwesome';
padding:0 15px;
letter-spacing:12px;
font-size:30px;
text-align:center;
}
4

2 回答 2

1

这仅仅是因为您的div元素设置为显示inline，因此不符合W3C 工作草案中定义的CSS 转换要求。转述：

可转换元素是 HTML 命名空间中的元素，可以是：

  • 块级元素；

  • 一个原子内联元素；

  • 一个元素，其display属性计算为table-row, table-row-group, table-header-group, table-footer-group, table-cell, 或table-caption;

  • 或 SVG 命名空间中具有或属性transform的元素。patternTransformgradientTransform

从您的分隔器中删除inline显示声明，转换将按指定工作。

于 2013-11-04T23:17:31.760 回答
0

您可以将文本包装在 < p > 标记中，然后：

transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */

这是一个小提琴：http: //jsfiddle.net/MathiasaurusRex/6P6MU/

于 2013-11-04T23:19:01.813 回答