我正在使用 CSS 创建竖排文本。问题是,我想要在前一个 div 旁边放置文本,并且之间或之后没有空格。我该如何解决这个问题?
<div id="wrapper">
<div class="pull-left">
here is some stuff
</div>
<div class="pull-left verticalText changeCursor">I'm vertical</div>
</div>
CSS(从 Bootstrap 向左拉):
.changeCursor
{
cursor: pointer;
}
.verticalText
{
height: 100%;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg); /* für Safari und Co */
-o-transform:rotate(90deg); /* Opera */
-ms-transform:rotate(90deg); /* MS IE 9 */
transform: rotate(90deg);
}
感谢您的帮助!
最佳答案
问题是 <div>
默认情况下,将尽可能宽。此外,当您进行转换时,原点默认位于元素的中间。
如果你制作它们 display: inline-block
并添加
transform-origin: 0 0;
到.vertical-text
规则,则文本最终位于第一个规则的右侧,但与它重叠。要修复那个,您可以使用translate()
:
#wrapper > div { display: inline-block; }
.verticalText
{
transform-origin: 0 0;
-moz-transform: rotate(90deg) translate(0, -100%);
-webkit-transform: rotate(90deg) translate(0, -100%); /* für Safari und Co */
-o-transform: rotate(90deg) translate(0, -100%); /* Opera */
-ms-transform: rotate(90deg) translate(0, -100%); /* MS IE 9 */
transform: rotate(90deg) translate(0, -100%);
}
关于html - CSS 垂直文本需要很大的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26564559/