html - 边栏 - 文本与栏重叠

Question

这个左侧边栏文本使栏本应位于的位置令人震惊。需要帮助将文本放置在隔间 (li) 内而不重叠。只需要调整一下。我已经有了 font-size %，但仍然无法正常工作。谢谢!

.menuleft {
    background-color: #CDD0D2;
    list-style-type: none;
    position: absolute;
    width: 9%;
    height: 100%;
    display: table;
}
.menuleft ul{
    display: table-cell;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    vertical-align: middle;
}
.text {
    -webkit-box-shadow: inset -1.3vw 0.8vw 5px 0px rgba(0,0,0,0.22);
    -moz-box-shadow: inset -1.3vw 0.8vw 5px 0px rgba(0,0,0,0.22);
    box-shadow: inset -1.3vw 0.8vw 5px 0px rgba(0,0,0,0.22);
    width: 100%;
    height: 17%;
    font-size: 2.5vw;
    color: white;
    text-align: center;
    text-decoration: none;
    background-color: #F06D22;
}
.menuleft li a {
    font-family: Futura LT,'Trebuchet MS', Arial;
    font-size: 80%;
    letter-spacing: 0.28vw;
    color: #fff;
    text-decoration: none;
    height: 100%;
    text-align: center;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    width: 100%;
    writing-mode: tb-rl;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform:rotate(180deg);
    transform: rotate(180deg);
    white-space:nowrap;
}

.menuleft li:hover {
    text-decoration: none;
    background: #0094D4;
}
.menuleft li a:hover {
    text-decoration: none;
    color: #fff;
}

.whitebar{
    text-decoration: none;
    display: table;
    width: 100%;
    height: 0.5%;
    background-color: #fff;
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(180deg);
    white-space:nowrap;
    bottom:0;
    margin: 0 auto;
}

    <div class="menuleft">
        <ul>
            <li class="text">
                <a href="#">Eficácia</a>
            </li>
            <li class="whitebar">
            </li>
            <li class="text">
                <a href="#">Rapidez</a>
            </li>
            <li class="whitebar">
            </li>
            <li class="text">
                <a href="#">Impacto <br> na vida real</a>
            </li>
            <li class="whitebar">
            </li>
            <li class="text">
                <a href="#">Tecnologia <br> avançada</a>
            </li>
            <li class="whitebar">
            </li>
            <li class="text">
                <a href="#">Segurança</a>
            </li>
        </ul>
    </div> 

Answer 1

更改:字体大小:2.5vw；至:字体大小:2.5vh；