テキストを90度回転して元の余白を削除する方法[重複]
したがって、テキストを90度に回転させるとこの問題が発生しますが、マージンは元のテキストと同じです(テキストを回転させていない場合)。
画像を回転させた後の余白は同じままです。(余白は、テキストを回転させた新しい方向に従うようにします)
(見やすくするために赤い輪郭を入れました。)
また、可能であれば、左側の白を塗りつぶすために赤い輪郭を作成できますか?(パディングを使用してみましたが、希望どおりに機能しません)
これがコードです
<script src="https://kit.fontawesome.com/2c7037d9e8.js" crossorigin="anonymous"></script>
<div class='color-pick'>
<div class='color-pick-text'>
Colors <i class="fas fa-caret-down"></i>
</div>
<div class='color-pick-box'>
<div class='color-opt color-red'></div>
<div class="color-opt color-orange"></div>
<div class="color-opt color-yellow"></div>
<div class="color-opt color-green"></div>
<div class="color-opt color-blue"></div>
<div class="color-opt color-indigo"></div>
<div class="color-opt color-purple"></div>
<div class="color-opt color-lime"></div>
<div class="color-opt color-pink"></div>
<div class="color-opt color-silver"></div>
<div class="color-opt color-custom"></div>
</div>
</div>
とcss:
.color-pick-box{
background-color:#4c4c47;
display:flex;
width:150px;
flex-wrap: wrap;
}
.color-pick{
border:1px solid blue;
display:inline-flex;
align-items: center;
overflow:hidden;
}
.color-pick-text{
text-align:center;
border:1px solid red;
transform:rotate(90deg);
}
.color-opt{
margin:5px;
height:20px;
width:20px;
border-radius:50%;
}
.color-pick .fas{
display:inline;
}
.color-red{
background:red;
}
.color-orange{
background:orange;
}
.color-yellow{
background:yellow;
}
.color-green{
background:green;
}
.color-blue{
background:blue;
}
.color-indigo{
background:indigo;
}
.color-purple{
background:purple;
}
.color-lime{
background:lime;
}
.color-pink{
background:pink;
}
.color-silver{
background:silver;
}
.color-custom{
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
ありがとうございました!私の悪い英語でごめんなさい
回答
1 George
私はこのように試しました。そしてそれはうまくいった。
.color-pick-text{
text-align:center;
border:1px solid red;
writing-mode: vertical-lr;
}