css - 在 H2 内旋转元素

Question

我试图在90 度<span>内旋转 a 。<h2>

现在，如果我只是将其设置为旋转，则不会发生任何事情-但是如果我将 a 添加display:block到span然后它会旋转。我的问题是它将其余部分推h2到下一行。

有没有办法让h2显示在一条线上，span中间旋转？

这是它的外观

HTML：

<h2>Join <span class="flip-text">With</span><span class="flip-text">Your</span> Family</h2>

CSS：

span.flip-text{font-size:10px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

Answer 1

就像克里斯托弗建议的那样， display: inline-block 是要走的路：http: //jsfiddle.net/X85b6/

<h2>Join<span>with<br />your</span>Family</h2>

h2 {
    font-size: 60px;
    text-transform: uppercase;
}
h2 span {
    font-size: 15px;
    line-height: 16px;
    display: inline-block;
    position: relative;
    bottom: 5px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}