旋轉元素互相重疊

有沒有辦法解決這個問題，當我旋轉2個元素時，它們互相重疊，因爲寬度和高度不交換。旋轉元素互相重疊

謝謝

a { 
 
    display: block; 
 
    transform: rotate(-90deg); 
 
}

<div> 
 
    <a href="#">This is the first link</a> 
 
    <a href="#">This is the second link</a> 
 
</div>

2017-06-21 MIkeMo

應該採取什麼結果是什麼樣子？ – j08691

一個在另一個下面 – MIkeMo

@MichaelMorin，下面你的意思是第二個在第一個的右邊？ – Chris

旋轉父。

a { 
 
    display: block 
 
} 
 

 
div { 
 
    transform: rotate(-90deg); 
 
}

<div> 
 
    <a href="#">This is the first link</a> 
 
    <a href="#">This is the second link</a> 
 
</div>

定位你可能喜歡將採取額外的轉換，或許，調整transform-origin財產股利。

你應該也知道，transform是純粹是 visual。它的確如此，而不是實際上影響元素的定位或邊界。

2017-06-21 15:24:24

我想知道你是否可以在div上執行'inline-block'，並使用不同的'transform-origin'將它放在左上角。我只能把它放在最左或最遠的位置，但不能同時放在兩個位置。 – Chris

這不完全是我想要做的。讓我們在這裏添加一個上下文，我在我的網站上有一個50px的側邊欄，其中包含角度爲-90度的標籤。問題是，在我旋轉我的標籤後，它們都相互重疊，並且它們很難在沒有絕對位置的情況下進行定位。 – MIkeMo

@MichaelMorin如果你在你的問題中添加了一個可視化圖標，這很有幫助，因此很清楚目標是什麼。 – hungerstar

旋轉容器並顯示孩子inline-block似乎有伎倆。

.container { 
 
    transform: rotate(-90deg); 
 
} 
 

 
.container a { 
 
    display:inline-block; 
 
    margin: 0 5px; 
 
}

<div class="container"> 
 
    <a href="#">This is the first link</a> 
 
    <a href="#">This is the second link</a> 
 
</div>

2017-06-21 15:56:23 Dexter0015

回答