Buttons nebeneinander ohne Abstand positionieren

  • Hallo, jetzt habe ich wieder eine Frage.


    Ich möchte gerne 3 Buttons direkt nebeneinander anzeigen, ohne Abstand.


    HTML
    1. <div class="button-group">
    2. <button type="button" class="button">Button 1</button>
    3. <button type="button" class="button">Button 1</button>
    4. <button type="button" class="button">Button 1</button>
    5. </div>


    Wenn ich Links mache und die mit CSS wie Buttons aussehen lasse funktioniert es, ich würde jetzt aber trotzdem gerne wissen, warum das bei Buttons so problematisch ist und vor allem wie man das machen kann.


    Ich habe es versucht mit margin und padding: 0. Auch !important ändert nichts daran. Nun habe ich im Firebug gesehen, Rand 3 und Innenabstand 6. Wahrscheinlich ist das irgendwie vorgegeben, oder woher kommt sonst der Abstand? Kann mir von euch jemand sagen, wie ich den wegmachen kann?


    Vielen Dank schonmal :)

  • Input Elemente sind grundsätzlich schwierig zu gestalten. Das liegt unter Anderem daran, dass sie von jedem Browser verschieden dargestellt werden.


    Das Problem in diesem Fall sind der Umbruch im Quellcode und ein unsichtbares Leerzeichen, welches aufgrund der Normalisierung eingefügt wird. Wenn du den Umbruch entfernst, rücken die Buttons näher aneinander:


    HTML
    1. <div class="button-group">
    2. <button type="button" class="button">Button 1</button><button type="button" class="button">Button 1</button><button type="button" class="button">Button 1</button>
    3. </div>


    Das löst das Problem aber nicht völlig.


    Komplett kannst du den Abstand nur verhindern, indem du die border-EIgenschaft änderst. Dadurch zerstörst du jedoch komplett das browserspezifische Design und musst es nachstellen:


    CSS
    1. button {
    2. margin: 0;
    3. padding: 0;
    4. border: 1px solid;
    5. }


    Außerhalb von Formularen solltest du immer <a> verwenden.

  • Hallo


    Das liegt daran, dass es sich bei Buttons um sogenannte Inline-Block-Elemente handelt.


    Wenn du sie in Block-Elemente oder Flexbox-Items umwandelst können sie ganz normal angeordnet werden. Zusätzlich haben Button-Elemente einen transparenten Rand, der auch entfernt werden muss. Das CSS dazu könnte folgendermaßen aussehen:


    Code
    1. .button-group {
    2. display: flex;
    3. }
    4. .button-group button {
    5. font-size: 4rem;
    6. border: 0;
    7. }


    Die Schrift habe ich vergrößert damit die Abstände besser zu sehen sind. Oder halt nicht, wenn es keine gibt.


    Gruss


    MrMurphy