为什么不旋转此文本？

问题描述：

我已经尝试了很多变种，没有运气。我错过了什么？为什么不旋转此文本？

#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>

块元素是预处理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>

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

与其说我害怕（似乎现在只支持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>

填充/边距？ – 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>

为什么不旋转此文本？

相关推荐