Question

我正在制作一个导航菜单，该菜单项旋转了-90度（请参见屏幕截图）：

我在CSS中尝试了几种方法，但是对齐方式仍然不正确。这是我尝试过的小提琴：https://jsfiddle.net/3rwe92ys/1/

使用的HTML：

<div class="menu">
  <div class="menu_item">
    <span>MENU 1</span>
  </div>
  <div class="menu_item">
    <span>MENU 2</span>
  </div>
  <div class="menu_item">
    <span>MENU 3</span>
  </div>
  <div class="menu_item">
    <span>MENU 4</span>
  </div>
</div>

使用的CSS：

html, body {
  height: 100%;
}
.menu {
  width: 80px;
  height: 100%;
  border: 1px solid #00F;
  position: relative;
}
.menu_item {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #FFF;
  background-color: #F00;
  position: relative;
  width: 40px;
  height: 200px;
  border: 1px solid #0F0;
  margin: auto;
}
.menu_item span {
  display: block;
  border: 1px solid #999;
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
}

我的问题是：如何根据屏幕截图对齐文本？即menu_item DIV中居中对齐，以及如何仅在菜单文本下应用background-color，例如“ MENU 1”而不是menu_item本身？我希望span的大小根据文本的尺寸（即像内联元素一样自动调整大小），但可以应用背景颜色。

谢谢。

Answer 1

去那里（相应地更改样式）

html, body {
  height: 100%;
}
.menu {
    width: 80px;
    height: 100%;
    border: 1px solid #00F;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.menu_item {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #FFF;
    background-color: #F00;
    position: relative;
    width: 40px;
    height: 200px;
    border: 1px solid #0F0;
    margin: 10px auto;
    align-items: center;
    display: flex;
    /* flex-direction: column; */
    white-space: nowrap;
}
.menu_item span {
  transform: rotate(-90deg);
  margin-left: -3px;
}

<div class="menu">
  <div class="menu_item">
    <span>MENU 1</span>
  </div>
  <div class="menu_item">
    <span>MENU 2</span>
  </div>
  <div class="menu_item">
    <span>MENU 3</span>
  </div>
  <div class="menu_item">
    <span>MENU 4</span>
  </div>
</div>

Answer 2

HTML代码：

<div class="menu">
  <div class="menu_item">
    <div>MENU 1</div>
  </div>
  <div class="menu_item">
    <div>MENU 2</div>
  </div>
  <div class="menu_item">
    <div>MENU 3</div>
  </div>
  <div class="menu_item">
    <div>MENU 4</div>
  </div>
</div>

CSS：

html, body {
  height: 100%;
}
.menu {
  width: 60px;
  height: 100%;
  border: 1px solid #00F;
  position: relative;
}
.menu_item {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #FFF;
  background-color: #F00;
  width: 40px;
  height: 22%;
  border: 1px solid transparent;
  margin: auto;
  margin-top: 13%;
  margin-bottom: 13%;
  position: relative;
}
.menu_item div {
  position: absolute;
  top: 40%;
  left: -10%;
  width: 50px;
  transform: translate(-50%, -50%);
  transform: rotate(-90deg);
}

使用此jsfiddle：https://jsfiddle.net/vsvaibhav2016/tscz0La5/1/

Answer 3

尝试此CSS：

html, body {
  height: 100%;
}
.menu {
  width: 100%;
  height: 80px;
  border: 1px solid #00F;
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  transform: rotate(-90deg);
  top: 465px;
  left: -450px;
}
.menu_item {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #FFF;
  background-color: #F00;
  position: relative;
  width: 200px;
  height: 40px;
  border: 1px solid #0F0;
  margin: auto;
  flex: 1;
}
.menu_item span {
  display: inline-block;
  border: 1px solid #999;
  width: 100%;
  height: 80px;
  text-align: center;
}

在CSS中旋转-90度后对齐菜单项

3 个答案: