gpt4 book ai didi

html - 变换 : rotate is creating unwanted white space

转载 作者:太空宇宙 更新时间:2023-11-04 14:15:06 28 4
gpt4 key购买 nike

我有一个使用 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>

最佳答案

通过使旋转元素成为“ block ”而不是“内联 block ”,下面的空间消失了。

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 中看到的那样, 添加的新文本恰好位于旋转文本的下方,没有间隙。

关于html - 变换 : rotate is creating unwanted white space,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29420082/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com