transform：rotate正在創建不需要的空白空間

我有一個使用transform：rotate的頁面，但留下了一個大的空白，元素本來不會旋轉。我發現其他一些人也提出類似的問題，但我一直無法調整這些答案來解決我目前的問題。我認爲他們很可能包含正確的解決方案，而我只是在試圖將它應用到我的情況下犯了一個錯誤：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; 
}

來源

2015-04-02 Jonathan Basile

不知道你在問什麼。 – 2015-04-02 18:50:18

我認爲你應該在變換和變換原點上多玩一點，這樣你就可以獲得預期的結果，我修改了你的[fiddle]（https://jsfiddle.net/L2h12qm5/1/），這樣你就可以看到我'在說話時，我不確定那是你想做什麼，所以我不會把它當作答案。您可以獲取[transform]（https://developer.mozilla.org/en-US/docs/Web/CSS/transform）和[transform-origin]（https://developer.mozilla.org/en）的更多信息-US/docs/Web/CSS/transform-origin） – valarauko 2015-04-02 19:18:56

我在問我如何在不留下底部空白的情況下進行相同的旋轉。我看了一下你的編輯@valarauko，但看起來白色空間仍然存在。 – 2015-04-02 19:42:03

通過使旋轉的元素 '塊'，而不是 'inline-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，新的文本添加下方無間隙的旋轉的文本下跌。

來源

2015-04-02 20:55:14 lycorine

-1

使用這個CSS屬性::::::

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

來源

2015-09-22 11:51:39

新的解決方案爲您，如果上述CSS不爲你工作，所以用這一招。在TD標籤中添加Span標籤。您可以添加左右邊距。

<td> 

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

</td>

來源

2015-09-22 14:51:40

transform：rotate正在創建不需要的空白空間

回答

相關問題