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>

IDの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要素が表示するように設定されているため、W3C Working Draft で定義されているinlineCSS 変換の要件を満たしていないためです。言い換えると:

変換可能な要素は、次のいずれかの HTML 名前空間内の要素です。

ディバイダーから表示宣言を削除する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 に答える