将列表项目旋转90度

我正在研究一个项目，我想要一个网格和一个右侧部分与垂直列表项目。所以我想旋转每个列表项目90度。将列表项目旋转90度

像这样：

然而，当我尝试实现这个造型，每个列表项趋于重叠，保留了昔日的高度，宽度和位置。我在此JSFiddle中隔离了此问题。

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; 
     } 
    } 
    } 
}

有谁知道我怎么能正确地组织这些项目？

来源

2016-07-11 Brandon Fujii

你可以看看writing-mode

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; 
     } 
    } 
    } 
}

来源

2016-07-11 22:30:48

将列表项目旋转90度

回答

相关问题