小编Jen*_*ica的帖子

我的布局看起来有点像书架,请参阅我的jsfiddle示例.书架是响应性的,所以没有固定的宽度.我面临的问题是,我无法将文本集中在面板中,"横向"在书籍两侧.由于文本被转换为垂直显示,因此它非常棘手.有没有人对如何使这项工作有任何想法？

HTML

<div class="panel">
  <a href="#first">
    <span>first</span>
  </a>
</div>

CSS

.panel {
  float: left;
  height: 100%;
  width: 15%;
  margin-right: 5%;
}
.panel a {
  text-align: right;
  background: green;
  padding: 20px 10px;
  height: 100%;
  display: block;
  white-space: nowrap;
  color: white;
  float: left;
  width: 100%;
  text-decoration:none;
}
.panel a span {
  white-space: nowrap;
  color: white;
  text-transform: lowercase;
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: top right;
  display: block;
  width: 300px;
  margin-left: -300px;
  letter-spacing: 1px;
  font-size: 20px;
}