爲什麼不旋轉此文本？

我已經嘗試了很多變種，沒有運氣。我錯過了什麼？爲什麼不旋轉此文本？

#menu { 
 
\t position: absolute; 
 
\t width: 50px; 
 
\t height: 250px; 
 
\t top: 15px; 
 
\t left: 0; 
 
\t background-color: #ee2e24; 
 
\t color: white; 
 
} 
 
#menu span { 
 
\t transform: rotate(90deg); 
 
\t transform-origin: left top 0; 
 
}

<div id="menu"><span>MAIN MENU</span></div>

來源

2017-05-09 Scott Beeson

塊元素是預處理CSS，像小於或頂嘴？ – j08691

對不起，這是很少，修復了片段。 –

請參閱http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements –

嘗試text-orientation。

#menu { 
 
\t position: absolute; 
 
\t width: 50px; 
 
\t height: 250px; 
 
\t top: 15px; 
 
\t left: 0; 
 
\t background-color: #ee2e24; 
 
\t color: white; 
 
} 
 
#menu span { 
 
\t writing-mode: vertical-rl; 
 
    text-orientation: sideways; 
 
}

<div id="menu"><span>MAIN MENU</span></div>

來源

2017-05-09 15:32:24 Dexter0015

這治好了我的癌症。它有多兼容？ –

與其說我害怕（似乎現在只支持Firefox）。抱歉。 – Dexter0015

但似乎你應該按照這篇文章做同樣的事情：https：//davidwalsh.name/css-vertical-text – Dexter0015

您需要添加display:inline-block;到跨度

#menu { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 250px; 
 
    top: 15px; 
 
    left: 0; 
 
    background-color: #ee2e24; 
 
    color: white; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    transform: rotate(90deg); 
 
    /*transform-origin: left top 0;*/ 
 
    margin-top: 10px; 
 
}

<div id="menu"><span>MAIN MENU</span></div>

來源

2017-05-09 15:29:27 Chiller

填充/邊距？ – mplungjan

@mplungjan你可以使用填充和邊距:) – Chiller

你不能在SA段少用或SCSS。只是純粹的CSS，所以移動span out of #menu
span是一個內聯元素。你不能轉換內聯元素。製作跨度display: block

#menu { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 250px; 
 
    top: 15px; 
 
    left: 0; 
 
    background-color: #ee2e24; 
 
    color: white; 
 
} 
 
#menu span { 
 
    transform: rotate(-90deg) translateX(-100%); 
 
    transform-origin: 0% 0%; 
 
    display: block; 
 
}

<div id="menu"><span>MAIN MENU</span></div>

來源

2017-05-09 15:32:32 HerrSerker

爲什麼不旋轉此文本？

回答

相關問題