变换：旋转正在创建不需要的白色 space

Question

我有一个使用 transform: rotate 的页面，但留下了一大片白色 space 如果元素没有旋转，它本来应该在的地方。我发现其他几个人也在问类似的问题，但我无法调整这些答案来解决我目前的问题。我认为它们可能包含正确的解决方案，而我只是在尝试将其应用于我的案例时犯了一个错误：

Css rotate div creates white space on top

White space around css3 scale

如您所见，旋转文本下方有很多白色 space。我希望文本在同一个地方结束，没有那个白色 space.

div.titles {
  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;
}

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

Answer 1

通过使旋转元素 'block' 而不是 'inline-block'，下面的 space 消失。

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 属性::::::

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

Answer 3

适合您的新解决方案，如果上述 CSS 对您不起作用，请使用此技巧。在 TD 元素中添加一个 Span 元素。你可以添加左边距和右边距。

<td>

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

</td>

变换：旋转正在创建不需要的白色 space

transform: rotate is creating unwanted white space

html

css

whitespace

css-transforms