css - 使用 CSS 旋转内联元素

Question

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

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

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

这是我目前对 JSfiddle 的尝试

我曾尝试使用 span 元素，它环绕着“或”来旋转它，我试图将 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;
}

Answer 1

从简化 HTML 标记开始:

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

更多的语义，都是一个标题，没有更多的<center> which is deprecated :)

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

.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;
}

瞧瞧!

Have an example! (固定链接)

一些简单的阅读:

• The display property

inline-block - The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)