0

タブを水平方向に操作するために必要なすべてのツールを備えたテスト FIDDLE をセットアップしました。

異なる CSS クラスを使用して、左側または右側のいずれかでタブを垂直に機能させるためのクラスも存在します。問題は、それらが正しく配置されていないことです。これは変換元属性によるものだと思いますが、苦労しています。

http://jsfiddle.net/H7gG8/19/

.tabs {
    width:400px; height:400px;
}
.tab { 
    position:relative;
}
.tab li {
    border-radius:10px 10px 0 0; height:40px; width:110px; background:#DDD; float:left; cursor:pointer;
} 
.tab.v {
    -webkit-transform:rotate(90deg);
}
.tab li.l {
    width:180px;
}
.tab.r {
    -webkit-transform:rotate(-90deg);
}
.tab.r li {
    float:right;
}
.tabs .conts {
   height:100%; position:relative; clear:both;
}
.tabs .cont {
    background:#EEE; height:300px; position:absolute; width:100%;
}
​
4

1 に答える 1

0

タブ コンテナの高さ属性をタブ フレームワーク全体の高さにリセットします。高さ:100%; コンテナーに top:-40px を追加してから、垂直タブの場合は right:0 と top:0; を追加します。

http://jsfiddle.net/H7gG8/71/

シンプルな..

于 2012-10-01T13:15:16.233 に答える