使用CSS旋转内联元素

Question

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

我正试图为作业制作一个“交易或不交易”游戏。我花了太多时间让它看起来很好，这就是我的问题出现的地方。

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

这是我目前对JSfiddle

的尝试

我尝试使用span元素包围'OR'来旋转它，我试图将H1元素更改为LI元素（使用其他答案中建议的nth-child解决方案）但是这也没用。

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

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

etvoilà！

Have an example!（固定链接）

一些轻读：

• The display property

  

inline-block - 该元素生成一个块元素框，该框元素框将与周围的内容一起流动，就好像它是一个单独的内联框（行为很像被替换的元素）

Answer 2

.orlogo {   
  display:inline-block;
  color: white;
  background: black;
  border: black solid 1px;
  width: 60px;
  transform: rotate(270deg)
 }

你必须让orlogo显示内联块才能生效。

更新小提琴：http://jsfiddle.net/oh5mn57b/1/

Answer 3

你不能旋转内联元素，块元素会在你的情况下使用inline-block来表示需要旋转的特定元素