Mehere Buttons nebeneinander - border verbinden

olaf2500 · 14. Juni 2018

Hi zusammen,

ich habe mehrere Buttons nebeneinander und alle haben die CSS-Eigenschaft

CSS

border: 0.1vw solid #6B7E85;

Da sie aber direkt aneinander sind wirkt der Rahmen zwischen den Buttons jeweils doppelt so groß, da er ja aus dem jeweils linken und rechten Rand der aneinander grenzenden Buttons besteht.

Kann man diesen Rand irgendwie verschmelzen? Ich weiß ich könnte bei allen außer dem Button ganz rechts den rechten Rand entfernen, allerdings variiert es, welcher Button ganz rechts ist. Mit Javascript würde ich es hinbekommen, ich frage mich nur ob es nicht eine einfache Lösung mit CSS gibt.

basti1012 · 14. Juni 2018

Ja.

du gibst den ersten button

border: 0.1vw solid #6B7E85;

den zweiten dann

border-bottom 0.1vw solid #6B7E85;

border-top: 0.1vw solid #6B7E85;

border:right: 0.1vw solid #6B7E85;

bei den nächsten buttons genau so .

Du verstehen wie ich meine ?

UPS habe ich mich verlesen. Wenn du niocht weißt welcher button gerade hinten ist dann mach es über first-child bzw last-child und und so weiter

olaf2500 · 14. Juni 2018

ja verstehe ich, aber wie schon von mir geschrieben, es variiert, welcher Button ganz rechts bzw ganz links ist. Daher habe ich es momentan so, dass alle Buttons keinen rechten Rand haben und ich mit Javascript abfrage, welcher Button rechts ist und diesem gebe ich dann einen rechten Rand (ebenfalls mit Javascript). Ich dachte nur es gibt vielleicht einen unkomplizierteren Weg, ähnlich wie border-collapse bei einer Tabelle

basti1012 · 14. Juni 2018

Ja das geht ,habe gerade pen gebaut und mit shuffel die buttons immer wechseln lassen und es sieht immer gut aus mit der css

Code

input:first-child{
  border:2px solid red;
}
input:nth-child(2),
input:nth-child(3),
input:nth-child(4),
input:nth-child(5){
  border-top:2px solid red;
    border-bottom:2px solid red;
    border-right:2px solid red;
}

Alles anzeigen

Mehere Buttons nebeneinander - border verbinden

Jetzt mitmachen!

Teilen