Rotierende Listenelemente um 90 Grad

Ich arbeite an einem Projekt, bei dem ich ein Raster und einen rechten Abschnitt mit vertikalen Listenelementen haben möchte. Also würde ich jedes Listenelement um 90 Grad drehen wollen.Rotierende Listenelemente um 90 Grad

Wie so:

Allerdings, wenn ich versuche, dieses Styling zu implementieren, wobei jede Liste Punkt neigt dazu, zu überlappen, seine frühere Höhe, Breite beibehalten wird, und die Position. Ich habe das Problem in diesem JSFiddle isoliert.

HTML

<body> 
    <div class="grid"> 
    <h1>Some other content</h1> 
    </div> 
    <ul class="section-list"> 
    <li class="section-tab"><a href="#">Breakfast</a></li> 
    <li class="section-tab"><a href="#">Lunch</a></li> 
    <li class="section-tab"><a href="#">Dinner</a></li> 
    <li class="section-tab"><a href="#">Blah</a></li> 
    </ul> 
</body>

CSS

body { 
    .grid { 
    display: inline-block; 
    float: left; 
    padding: 10px; 
    } 
    .section-list { 
    float: left; 
    max-width: 68px; 
    background: #fff; 
    .section-tab { 
     list-style: none; 
     display: inline-block; 
     transform: rotate(90deg); 
     white-space: nowrap; 
     a { 
     display: block; 
     padding: 16px 20px; 
     } 
    } 
    } 
}

Wer weiß, wie ich richtig diese Elemente strukturieren könnte?

Quelle

2016-07-11 Brandon Fujii

Sie bei writing-mode

einen Blick darauf werfen kann

update possible of your code:

body { 
    .grid { 
    display: inline-block; 
    float: left; 
    padding: 10px; 
    } 
    .section-list { 
    float: left; 
    max-width: 68px; 
    background: #fff; 
    .section-tab { 
     list-style: none; 
     display: inline-block; 
     -webkit-writing-mode: vertical-lr; 
     /* old Win safari */ 
     writing-mode: vertical-rl;/* FF */ 
     writing-mode: tb-lr; 
     /* writing-mode:sideways-lr; could be the one */ 
     /* eventually untill sideways-lr is working everywhere */ 
     transform: scale(-1, -1); 
     white-space: nowrap; 
     a { 
     display: block; 
     padding: 16px 20px; 
     } 
    } 
    } 
}

Quelle

2016-07-11 22:30:48

Antwort

Verwandte Themen