Position einer Schaltfläche innerhalb einer div

Wie Sie sehen können in meinen Jsfiddle, ich habe ein div und drei Tasten. Ich möchte die Schaltflächen platziert werden, an right: 85% (so dass Sie bekommen, was ich meine), ohne dass ich dafür verwenden position: absolute.

Ich auch so probiert:

.button {
    float: right;
}

.. aber die Tasten fallen heraus aus der div.

Irgendwelche Ideen, bitte?

  • Warum nicht Sie verwenden möchten position: absolute?
  • Da müsste ich fest, wo alle Tasten liegen sollten, basierend auf meinem Bildschirm nur @iamnotmaynard
  • Ja, ich glaube, ich sehe was Sie für gehen.
InformationsquelleAutor gsamaras | 2015-11-13
  1. 1

    Hier mein JsFiddle.

    Ich habe ein div zu halten, Ihre drei-Tasten-divs. Sie können aktualisieren Sie die Marge Recht zu haben, es mehr auf der linken Seite.

    div.button-holder div:last-child{  
    margin-right: 10px;   
}
    • Ich denke, dass Sie im Zusammenhang mit meiner Geige. Hast du das update?
    • Netter Versuch. Die Tasten sind schön auf der x-Achse, nicht aber auf der y -. Was ich meine ist, dass ich möchte, dass Sie im header!
    • Wie das JsFiddle?
    • Ok, die Tasten sind schön positioniert. Ich möchte, dass Sie ein bisschen weniger das Recht, sein wenn. Ich meine jetzt Löschen, berührt den rechten Rand der Kopfzeile. Ich möchte es ein wenig nach Links, wie 10px zum Beispiel, so dass es nicht berühren! Außerdem wird der text ebenfalls verschoben (sollte es nicht). +1 für den Versuch obwohl.
    • Dort gehen Sie. Diese eine sollte gut sein. Mybad, ich wusste nicht, was Sie wollte, genau.
    • Dann wurde es mir schlecht, da war ich nicht klar genug beim posten die Frage. Es ist perfekt, aktualisieren Sie die Antwort bitte.

    InformationsquelleAutor Chin Leung
  2. 1

    Ändern Sie die Markup-Tags und fügen Sie class:

    <div class="header_div">
   foo

   <div class='btns'>
      <button class="button">New</button>
   </div>
   <div  class='btns'>
      <button class="button">Load</button>
   </div>
   <div  class='btns'>
      <button class="button">Delete</button>
   </div>
</div>

    Statt..

    .button {
    float: right;
}

    Versuchen, Diese...

    .btns {
    float: right;
}
    • John, es ist fast perfekt. Jedoch, ich möchte den Knopf nicht zu erreichen, am Ende des Bildschirms. So, jetzt, es;s wie es ist right: 100% und ich möchte, dass es über 90%.
    • Sie können add-Marge .btns:first-child { margin-right: 60px; }
    • Vielen Dank für die Beratung, John!
    • Froh, dass ich helfen konnte!
    InformationsquelleAutor John Roca
Schreibe einen Kommentar