2

一部のテキストを -90 度回転させましたが、テキストの長さを増やすと、「上向き」(つまり、-90 度の回転で右) に拡張されますが、テキストを下向きに拡張したい (つまり、 -90 度の代わりに 90 度回転しますが、それでも -90 度の向きが必要です)。

これが私が見ているものです：

ここに画像の説明を入力

これが私のhtmlとcssです：

<div class="header"><div class="wrapper"><span>Products</span></div></div>

.section > .header { display: block; position: relative; float: left; font-size: 48pt;      width: 157px; height: 100%; }
.section > .header > .wrapper { width: 100%; height: 100%; 
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg); }
.section > .header > .wrapper > span { display: block; position: relative; left: 25px; height: 100%;
}

CSSでこれを行う方法はありますか？私はたくさんのこと（ラッパーを回転させ、次に内側のスパンを逆回転させ、テキストを右に揃える）やその他のものを試しましたが、役に立ちませんでした。

ありがとう、ライアン

4

2 に答える 2

0

それを理解しました：（テキストの整列をもう少し適切に行う必要がありました）

.section > .header > .wrapper { display:block; text-align: right; }
.section > .header > .wrapper > span { display: block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); height: 100px;  width: 600px; position: relative; top: 260px; left: -180px; }

とにかくありがとう！

于 2012-10-09T17:03:16.020 に答える
0

leftの値を減らすことでこれを解決できます。.header > .wrapper > span

このデモをチェック

その中で、左の値をに変更しました-120px

.section > .header > .wrapper > span { 
    display: block; 
    position: relative; 
    left: -120px; //changed the value
    height: 100%;
}​
于 2012-10-09T06:35:48.050 に答える