0

水平テキストの水平CSSメニューと垂直テキストの垂直サブメニューを作成する方法があるかどうか疑問に思っていました..試してみましたが、2番目のUL（垂直の場合）を回転させると、配置が崩れます。また、最後の垂直メニューまでメニューが左に流れるようにしたい.. これはできますか? 助けてください。

<style>
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#table-header {
    float: left;
    width: 8%;
}
.vertical-list-container {
    float: left;
    width: 90%;
}
.vertical-list{
    float: left;
    width: auto;
}
.vertical-list-trans{
    float: left;
    border-left:1px solid green;
    border-right:1px solid red;
    border-top:1px solid blue;
    border-bottom:1px solid black;
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

<div class="vertical-list-container">
    <ul class="vertical-list-trans">
        <li>1</li>
        <li>John Doe</li>
        <li>123 Address Lane</li>
    </ul>
    <ul class="vertical-list-trans">
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road</li>
    </ul>
    <ul class="vertical-list-trans">
        <li>1</li>
        <li>John Doe</li>
        <li>123 Address Lane</li>
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road456 Another Road456 Another Road</li>
    </ul>
    <ul class="vertical-list-trans">
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road</li>
        <li>123 Address Lane</li>
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road456 Another Road456 Another Road</li>
        <li>123 Address Lane</li>
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road456 Another Road456 Another Road</li>
    </ul>
</div>
4

2 に答える 2

0

質問の何が問題なのかよくわかりませんが、タイトルからすると、垂直の「サブメニュー」を持つ水平の「メニュー」を探していると思います。

transform-origin: top left;一緒に使用してから、「サブメニュー」transform: rotate(90deg);の配置をいじる必要がありますposition:absolute; top:--px; left:--px;

説明するのは難しいです。実際の例については、jsfiddle を参照してください。

jsフィドル

于 2013-04-23T21:47:48.773 に答える
0

w3.orgのCSS Transforms > Transform Rendering Model仕様から:

HTML 名前空間では、transform プロパティは、変換された要素を囲むコンテンツの流れに影響を与えません。ただし、オーバーフロー領域の範囲では、変換された要素が考慮されます。この動作は、相対位置によって要素がオフセットされた場合に発生するものと似ています。

このコードペンを参照してください: http://codepen.io/keithwyland/pen/evFof

赤の div が変換されても、div のフローが変更されていないことに注目してください。その赤い div の高さはまだコンテンツの流れの中にあり、変換されていないかのように緑の div を押し下げます。これはまさに、仕様で動作するように変換が定義されている方法です。

これが、ナビゲーション アイテムを回転させると、位置合わせがずれて表示される理由です。それらはもはや互いに接近していないように見えますが、実際の流れによれば、接近しています。

別の例を次に示します: http://codepen.io/keithwyland/pen/DKLHi

この例では、緑の div が赤の div のフローがある場所の隣に浮かんでいることに注意してください。変換された右端ではありません。

于 2013-04-23T20:10:24.167 に答える