Question

我有一个使用transform：rotate的页面，但是如果它没有旋转，则会留下一个大的空白区域。我发现其他几个人问了类似的问题，但我无法调整这些答案来解决我目前的问题。我认为他们可能包含正确的解决方案，我只是在试图将其应用于我的案例时犯了错误：

Css rotate div creates white space on top

White space around css3 scale

这是一个向您展示问题的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;
}

Answer 1

通过使旋转元素“阻止”而不是“内嵌块”，下面的空格消失。

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;
}

正如您在此编辑过的fiddle中所看到的，添加的新文字正好位于旋转文本的正下方，没有间隙。

Answer 2

新的解决方案，如果以上CSS不适合您，请使用此技巧。在TD标记中添加Span标记。你可以添加左右边距。

<td>

<span style="float: left; 
transform: rotate(-90deg); 
white-space: nowrap; 
width: 30px;">
VACATE ORDER
</span>

</td>

Answer 3

使用此CSS属性::::::

.div.titles {
    float: left;
    margin-left: 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    white-space: nowrap;
    width: 20px;
}

transform：rotate正在创建不需要的空白区域

3 个答案: