使用CSS旋转行内元素

Question

我知道已经有很多类似的问题了，但似乎都不适用于我...因为大多数解决方案都针对“nth-child”，而我的技能非常初级，我不理解它是如何工作的。

我正在尝试制作一个“Deal or No Deal”游戏作业。我花费了太多时间来让它看起来好看，这就是我的问题所在。

我想使用CSS制作“Deal or No Deal”标志。不幸的是，要使我的“OR”旋转，我似乎不能使用“inline”。

这是我当前在JSfiddle上尝试的：JSfiddle 我尝试使用元素将“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;
}

- Asteria

---

内联元素无法旋转。您需要使用display: inline-block。注意：inline-block默认会添加一些边距，这也需要进行调整。 - Harry

@Harry 抱歉，我对这个还不太熟悉。inline和inline-block有什么区别？ - Asteria

在评论中解释可能有点太长了。也许，这个W3C规范可以帮助您详细了解两者之间的区别。简单来说，内联元素没有边界块/框，而块/内联块元素则有。 - Harry

相关问题：https://dev59.com/T2Up5IYBdhLWcg3w_rkl - Harry

块级元素通常在浏览器中显示时会以新行开始（和结束）。例如：<h1>、<p>、<ul>、<table>HTML内联元素 内联元素通常在不启动新行的情况下显示。例如：<b>、<td>、<a>、<img>、<span>等。 - Feroza

Answer 1

从简化您的HTML标记开始：

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

更语义化了，现在只有一个标题，没有过时的<center>（已弃用） :)

现在为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*/
}

和 span：

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

et voilà!

这里有一个例子！（固定链接）

一些轻松阅读：

• display属性

inline-block - 元素生成一个块级元素框，将像单个内联框一样与周围内容一起流动（类似于替换元素的行为）

- misterManSam

---

嘿，非常感谢 :D 很容易理解，而且运行得很好。 - Asteria

Answer 2

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

你需要将orlogo的显示设置为inline-block才能使其正常工作。

更新的Fiddle: http://jsfiddle.net/oh5mn57b/1/

- Dany Minassian

Answer 3

你不能旋转Inline元素，只有block元素可以旋转，在你的情况下，请使用inline-block来旋转需要旋转的特定元素

- Feroza