小编Lia*_*m G的帖子

我知道这个问题非常措辞,但我真的不知道怎么说出来!

我有以下HTML:

<a href="" class="side-book"><p>Book Now</p></a>

使用以下CSS:

.side-book{
        position:fixed;
        left:0;
        z-index:9999;
        width:40px;
        height:20vh;
        top:40vh;
        bottom:40vh;
        background-color: #be0500;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        display:flex;
    }
.side-book>p{
        color:white;
        float:left;
        margin: auto;
        transform: rotate(90deg);
        text-transform: uppercase;
    }

其结果如下:

我怎样才能使"书"和"现在"这两个词相互叠加？我已经尝试将它们放在单独的<p>标签中,但无济于事.

另外:如果有人对标记的其余部分有任何更好的建议,使其更清洁/更好,请把它们扔给我!

编辑:

有点像这样(字母可以任意方式定向,我只是无法显示它们,因为它们在使用此文本编辑器的示例中):

___
   |
   |
 B |
 O |
 O |
 K |
   |
 N |
 O |
 W |
   |
___|