我正在做一个项目，我想在其中有一个网格和一个带有垂直列表项的右手部分。所以我想把每个列表项旋转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;
}
}
}
}
有人知道我怎样才能把这些东西结构好吗？
最佳答案
您可以查看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;
}
}
}
}
关于html - 将列表项旋转90度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38316628/