Vertikale Schaltfläche mit CSS

Ich versuche zu bauen, die einen vertikalen button, aber ich nicht in der Lage, den text in nur einer Zeile.

Vertikale Schaltfläche mit CSS

Bis jetzt habe ich:

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>

Irgendeine Idee, wie kann ich push-down-text und setzen Sie es in nur einer Zeile?

  • Nicht Transformation der p tage, verwandeln die div. Siehe hier - stackoverflow.com/questions/26390001/...
  • Hallo danke aber ich bekomme immer noch den text in 2 Zeilen...
  • tatsächlich ist die P-element ist das problem, weil dessen Größe ist nicht definiert, d.h. es setzt die Größe auf den Standardwert (in diesem Fall verursacht es anzeigen mit split-text, weil der Breite ist zu kurz.
InformationsquelleAutor Patrick | 2014-10-27
  1. 2

    Können Sie dies mit dem html-non breaking space &nbsp; hier <p>Como&nbsp;funciona</p>

    dies ist, wie es aussieht, nachdem es geändert und die Marge auf das Bild

    jsfiddle

    • Hi vielen Dank, es funktioniert Prima!
    InformationsquelleAutor akaBase
  2. 6

    demo - http://jsfiddle.net/victor_007/m1c5xazr/1/

    drehen Sie den Knopf anstelle von 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;
}
    • Hi danke, aber ich will einfach nur, um den text zu drehen.
    InformationsquelleAutor Vitorino fernandes
  3. 0

    durch Zugabe von etwas Mehr CSS sollte es funktionieren zum Beispiel:

    HTML

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

    CSS

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

    durch die Anpassung der Abmessungen der

    element gewinnen Sie mehr Kontrolle über wie es aussieht
    beachten Sie auch, dass die Verwendung von: 

    position:relative;

    können die Höhe und Breite Passform nur innerhalb des übergeordneten DIV -

    hoffe, das hilft

    • Hi danke, aber es ist immer noch "brechen" Sie den text.
    InformationsquelleAutor CMS_95
Schreibe einen Kommentar