html - 试图将表头旋转到左侧 html

Question

假设我有这个 div：

<div class="menu-wrapper">
    <h3 class="pane-title">
        <a href="">Service List</a>    
    </h3>
    <ul class="menu">
        <li class="menu-item"><a href="">Item 1</a></li>
        <li class="menu-item"><a href="">Item 2</a></li>
        <li class="menu-item"><a href="">Item 3</a></li>
        <li class="menu-item"><a href="">Item 4</a></li>
    </ul>
</div>

应用一些 CSS 后，div 将如下图所示：

我应该在我的 CSS 中进行哪些最佳转换以将标题向左移动，如下图所示：

如果我找到一种避免使用绝对定位的方法，那将非常有用。

标签： htmlcss

Answer 1

这个想法是writing-mode: vertical-rl;用于标题

div {
   display: flex; 
   border: 1px #ccc solid;
   color: #333;
   font: 1rem Arial;
}

div h3 {
   writing-mode: vertical-rl;
   text-align: center;
   margin: 0;
   margin-block-start: 1rem;
   margin-block-end: 1rem;
}

a {
   color: currentColor;
}

h3 a  {
   text-decoration: none;
}


.menu {
   flex: 1;
   padding: 2rem;
   line-height: 1.5;
   list-style: none;
   margin: 0;
   border-left: 1px #ccc solid;
}

<div>
    <h3 class="pane-title">
        <a href="">Service List</a>    
    </h3>
    <ul class="menu">
        <li class="menu-item"><a href="">Item 1</a></li>
        <li class="menu-item"><a href="">Item 2</a></li>
        <li class="menu-item"><a href="">Item 3</a></li>
        <li class="menu-item"><a href="">Item 4</a></li>
    </ul>
</div>