Hallo,
ich versuche mittels CSS
CSS
/*Ranggrafiken Nebeneinander*/
.multirankContainer:first-child > .userTitle{
display: inline-block;
border-right: none;
}
.multirankContainer:last-child > .userTitle{
display: inline-block;
border-left: none;
}aus dieser Anzeige:
Diese zu machen:
und für mehrere diese
Sprich ich möchte auch gerne diesen Abstand zwischen den Grafiken und auch wie hier nur bei der ersten und letzten diesen Border-Radius generieren.
Klappt leider auch nicht
CSS
/*Ranggrafiken Nebeneinander*/
.multirankContainer {
display: inline-flex !important;
}
.multirankContainer > div:not(:first-child) .userTitle{
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.multirankContainer > div:not(:last-child) .userTitle{
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}Edit:
Ich komme der Sache näher, alerdings wird Mobil alles anders dargestellt:
CSS
/*Ranggrafiken Nebeneinander*/
.multirankContainer {
display: inline-flex !important;
}
div.multirankContainer > div:not(:first-child) p.userTitleBadge{
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.multirankContainer > div:not(:last-child) p.userTitleBadge{
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin-right: 1px;
}
.multirankContainer > div p.userTitleBadge {
flex: 0 1 auto;
}LG