Ausrichtung Produktfilter

Diskutiere Ausrichtung Produktfilter im HTML Forum im Bereich Programmierung; Hallo, ich habe eine neue Filterkategorie hinzugefügt und nun folgendes Hindernis: drei Filterkategorien sind in der oberen Zeile, eine rutscht...
  • Ausrichtung Produktfilter Beitrag #1
S
srie
New member
Beiträge
2
Punkte Reaktionen
0
Hallo,

ich habe eine neue Filterkategorie hinzugefügt und nun folgendes Hindernis: drei Filterkategorien sind in der oberen Zeile, eine rutscht in die nächste Zeile. Ich hätte gerne alle in einer Zeile. Der Code ist folgender:

<style>

.lb-kollektion-filter {
overflow: hidden;
max-width: 300px;
width: 100%;
margin: auto;
}

.lb-kollektion-filter a {
width: 30.33%;
margin: 1.5%;
text-align: center;
float: left;
color: grey;
font-size: 12px;
}

.lb-kollektion-filter a img {
width: 100%;
display: block;
margin-bottom: 9px;
}


</style>

Kann mir hier jemand helfen, wie ich alle in eine Reihe bekomme? Vielen dank :)
 
Anhänge
  • Screenshot 2024-07-09 095510.png
    Screenshot 2024-07-09 095510.png
    15,5 KB · Aufrufe: 1
  • Ausrichtung Produktfilter Beitrag #2
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Guten Morgen und willkommen im Forum!
Leider postest Du nicht dein HTML aber man kann es sich zusammen reimen. Die Lösung besteht darin, auf float und das Rechnen mit width: 30.33%; zu verzichten und statt dessen dem Elternelement display: flex; zuzuweisen. Dann erledigt der Browser das Errechnen der richtigen Breite so dass alle Elemente in eine Zeile passen.
 
Zuletzt bearbeitet:
  • Ausrichtung Produktfilter Beitrag #3
S
srie
New member
Beiträge
2
Punkte Reaktionen
0
Sorry. Aber danke dir, super es hat geklappt :)
 
Thema:

Ausrichtung Produktfilter

Oben Unten