Richten Sie Die Schaltflächen Rechts

Ich bin erstellen einer Webseite, und ich bin mit einem kleinen Betrag von Problemen mit der Angleichung einige Tasten auf der rechten Seite der Seite.

Ich habe versucht, mit text-align: right und float: left.

Kann jemand versuchen, um zu sehen, was ich falsch mache?

Es ist derzeit live in http://biolinks.redxte.ch/

Alles andere ist geschätzt.

  • Brauchen Sie noch Hilfe? Ihre Tasten suchen Sie auf der rechten Seite ausgerichtet zu mir.
  • Jemand half mir in Ihrem Kommentar, danke 🙂
InformationsquelleAutor RedXTech | 2017-03-07
  1. 3

    Verwenden Sie diese

    .button-parent {
    text-align: right;
}

button {
    display: inline-block;
}

    oder wenn Sie es machen will, position absolut, Sie können mit diesem

    .add-me {
    position: absolute;
    right: 20px;
}
    • Ich würde gerne zu halten, der rest des Textes Linksbündig ausgerichtet werden.
    • Dann kann man position, an der es absolut.
    • Dort gehen wir das funktionierte perfekt, danke 😀
    • Froh, dass es geholfen hat.
    • Sorry, ich musste schlafen, vergessen zu akzeptieren. Vielen Dank 🙂
    InformationsquelleAutor Venkatesh SGS
  2. 1

    Können Sie

    .add-me{
    margin-left : 80%;
}

    Ich bin ein Anfänger, aber ich denke, das wird Ihr problem lösen.

    InformationsquelleAutor sumit
  3. 0

    Fügen Sie einfach .col-sm-12 div nach der Zeile und es funktioniert perfekt

    <div class="row social" id="snapchat">
  <div class="col-sm-12">
            <img src="/i/snapchat.svg" class="social-img">
            <span class="social-text">Snapchat</span>
            <span class="add-me">
                <a href="#" class="btn btn-secondary" role="button">Add Me</a>
            </span>
        </div>
</div>
    InformationsquelleAutor Mukesh Ram
  4. 0

    Wenn Sie wickeln die Sachen, die Sie wollen auf die Links in einem element, die Sie verwenden können, flexbox mit justify-content: space-between schieben Sie die Elemente auf die weit Ränder der Reihe.

    Können Sie auch flexbox auf jedem dieser Elemente mit align-items: center zu zentrieren, alles vertikal.

    Wickelte ich den Inhalt auf der linken Seite in einem div mit der Klasse .icon, und dann alles, was Sie brauchen, um zu übernehmen, ist dieser CSS -

    .social, .icon, .add-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

    Hier ist eine demo.

    CSS:

    /* included this from your site so the image won't be huge */
.social-img {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
}

/* this is the part you need */
.social, .icon, .add-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

    HTML:

    <base href="http://biolinks.redxte.ch/">

<div class="row social" id="instagram">
  <div class="icon"> <!-- added this div -->
    <img src="/i/instagram.png" class="social-img">
    <span class="social-text">Instagram</span>
  </div>
  <span class="add-me">
    <a href="https://instagram.com/redxtechx" target="_blank" class="btn btn-primary" role="button">View Profile</a>
  </span>
</div>

    InformationsquelleAutor Michael Coker
Schreibe einen Kommentar