logo标签列表

transform: rotate 会产生不必要的白色空间。

htmlcsswhitespacecss-transforms
6
我有一个页面使用了transform: rotate，但是元素在旋转后会留下很大的空白。我找到了一些其他人提出类似问题的帖子，但我无法将这些答案应用到我的问题上。我认为它们可能包含了正确的解决方案，而我只是在尝试将其应用于我的情况时犯了错误： Css rotate div creates white space on top White space around css3 scale 正如您所看到的，旋转后的文本下面有很多空白。我希望文本最终停留在同一位置，没有那个空白。 

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>

我认为你应该多尝试一下transform和transform-origin，这样你就可以得到你期望的结果。我修改了你的fiddle，这样你就可以看到我在说什么了。我不确定那是否是你想要做的，所以我没有把它作为答案。你可以在transform和transform-origin中获取更多信息。 - daniel.brubeck
我想知道如何在不留下底部的空白的情况下进行相同的旋转。我看了你的编辑@valarauko，但似乎白色空间仍然存在。 - Jonathan Basile
1
你可以通过将标题 div 设置绝对位置来消除空白空间，相对定位不起作用是因为容器仍然具有对象高度参考。这是fiddle。我认为这就是你想要的。 - daniel.brubeck
3个回答
6

将旋转的元素设置为“块级元素”而不是“内联块级元素”，则下方的空间将消失。

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中所看到的，新添加的文本紧跟在旋转的文本下方而没有间隙。

2
如果上述CSS对您无效，请使用以下技巧：在TD元素中添加一个Span元素。您可以添加margin-left和margin-right属性来调整样式。新的解决方案为您提供帮助。
<td>

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

</td>
-1
请使用这个 CSS 属性：
.div.titles {
    float: left;
    margin-left: 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    white-space: nowrap;
    width: 20px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接