使用 CSS 旋转内联元素

我意识到已经有很多这样的问题了，但我似乎无法让它们为我工作......因为大多数解决方案都针对“第 n 个孩子”或（以我极其“新手”的技能）我只是不明白它是如何工作的。

我正在尝试为一项任务制作一个“交易或不交易”游戏。我花了太多时间让它看起来不错，这就是我的问题出现的地方。

我想使用 CSS 制作“交易或不交易”标志。不幸的是，为了让我的“OR”旋转，我似乎无法使用“内联”。

这是我目前的尝试JSfiddle

我尝试过使用span元素，它环绕“OR”来旋转它，我尝试将 H1 元素更改为 LI 元素（以使用其他答案中建议的第 n 个子解决方案），但这也不起作用。

有人能指出我正确的方向吗？

HTML

<center>
<h1 class="deallogo"> Deal </h1><h1 class="orlogo">OR</h1><h1 class="nodeallogo"> No deal </h1>
</center>

CSS

h1 {
    display: inline;
}
.deallogo {
    background: linear-gradient(#685300, #E6B800);
    border: black solid 1px;
    width: 80px;
}
.orlogo {   
    color: white;
    background: black;
    border: black solid 1px;
    width: 60px;
    transform: rotate(270deg)
}
.nodeallogo {
    background: linear-gradient(#685300, #E6B800);
    border: black solid 1px;
    width: 128px;
}

首先简化您的 HTML 标记：

<h1 class="deallogo">Deal<span>OR</span>No deal</h1>

更多语义，都是一个标题，没有更多<center> 已弃用 :)

现在应用所需的 CSS 属性h1:

.deallogo {
    background: linear-gradient(#685300, #E6B800);
    border: black solid 1px;
    display: block; 
    /* the default */
    margin: 0 auto; 
    /* margin auto centers block elements that have a fixed width! */
    width: 204px; 
    padding: 0 9px 0 10px;
    /*Slight changes with width and padding values*/
}

和跨度：

.deallogo span {   
    color: white;
    background: black;
    border: black solid 1px;
    width: 35px;
    font-size: 0.7em; 
    /* Smaller font size to fit the height */
    transform: rotate(270deg);
    display: inline-block; 
    /* inline-block allows the element to have a height and width (and rotate) */
    vertical-align: top; 
    /* a top margin is being used, so let's get it up there with vertical-align */
    margin: 4px 0 0;
}

瞧！

举个例子吧！（固定链接）

一些轻松阅读：

• 显示属性

inline-block - 该元素生成一个块元素框，该元素框将与周围的内容一起流动，就像它是单个内联框一样（行为与替换元素非常相似）