Jon*_*ile 2 html css whitespace css-transforms
我有一个使用transform：rotation的页面，但是在元素未旋转的情况下留了一个大空白。我发现其他几个人也提出了类似的问题，但是我无法调整这些答案来解决我目前的问题。我认为它们可能包含正确的解决方案，并且在尝试将其应用于我的案例时犯了一个错误：
这是一个jsfiddle来向您展示问题：
https://jsfiddle.net/jonotrain/L2h12qm5/
如您所见，旋转的文本下方有很多空白。我希望文本以相同的地方结尾，没有空白。
这是HTML：
<BODY>
<DIV class = "titles" id = "sideways" style = "position: relative;">";
<p class = "volumes" id="volumes"></p>";
<ul class = "titles">
<li>ale.imzqzfojdobcggydk</li>
<li>mouwl sxjjwrk,osbl</li>
<li>cqjpjfeqhgovtto</li>
....
</ul>
</DIV>
</BODY>
和CSS：
div.titles {
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
display: inline-block;
right: 0;
left: 367px;
height: 260px;
top: -4px;
}
p.volumes {
padding: 0;
font-family: "Arial Narrow";
line-height: 220%;
font-size: 10;
}
ul.titles {
list-style-type: none;
text-align: center;
}
ul.titles li {
padding: 8px;
font-family:"Subway", "Courier", "serif";
font-size:11px;
color: #000000;
}
通过将旋转的元素设置为“块”而不是“行内块”，下面的空间消失了。
div.titles {
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
display: block;
right: 0;
left: 367px;
height: 260px;
top: -4px;
}
如您所见，在此经过编辑的小提琴中，添加的新文本恰好位于旋转文本的下方，没有间隙。