将列表项旋转 90 度
Bra*_*jii 3 html css transform rotation
我正在做一个项目，我想要一个网格和一个带有垂直列表项的右侧部分。所以我想将每个列表项旋转 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;
}
}
}
}
有谁知道我如何正确构建这些项目？
你可以看看write-mode
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;
}
}
}
}