Question

我正在尝试构建一个垂直按钮，但我无法将文本放在一行中。

enter image description here

直到现在我有：

CSS：

#hp-ctn-howItWorks
{
    position:fixed;
    top:300px;
    right: 0px;
    padding:0px;
    margin:0px;
    width: 40px;
    height:160px;
    background:#FF931E;
    z-index:15;
    border-radius: 3px 0px 0px 3px;
}

#hp-ctn-howItWorks img
{
    margin: 15px 0px 0px 13px;
}

#hp-ctn-howItWorks p
{
    color: #fff;
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
}

HTML：

<!-- How It Works Button -->
<div id="hp-ctn-howItWorks">
    <img src="~/Content/images/ui-symb-arrow-left-white-15x15.png" width="15" height="15" />
    <p>Como funciona</p>
</div>

任何想法我怎样才能下推文字并将其放在一行中？

Answer 1

演示 - http://jsfiddle.net/victor_007/m1c5xazr/1/

旋转buttom而不是text

#hp-ctn-howItWorks img {
    vertical-align:middle;
}
#hp-ctn-howItWorks {
    padding:0px 0px 0px 0px;
    text-align: center;
    margin:0px;
    width: 160px;
    height:40px;
    background:#FF931E;
    z-index:15;
    border-radius: 5px 5px 0px 0px;
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    transform-origin: bottom right;
    position: fixed;
    right: 0px;
}
#hp-ctn-howItWorks p {
    color:#fff;
    display:inline-block;
    line-height:40px;
}

Answer 2

您可以在此处使用html非中断空格 执行此操作<p>Como funciona</p>

这是改变它和图像上的边距后的样子

jsfiddle

Answer 3

通过添加一些更多的CSS，它应该起作用：

HTML

<p class="c">TEXT</p>

CSS

.c{width:100%;height:100%;position:relative;Top:30px;left:20px}

通过调整

元素的尺寸，您可以更好地控制它的外观还要注意使用：

position:relative;

允许高度和宽度仅适合父DIV

希望这会有所帮助

使用CSS的垂直按钮

3 个答案: