Single post in A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides > A Somewhat Extensive Guide to BBCodes >
There are several ways to do this. The least CSS intensive way is to put them in a table. You could change or hide the table borders with CSS if you like.
You can also use width, with a display setting to let them share a line. The box-sizing here prevents any padding and borders from making the bars larger than they really are.
199/250
98/40
555/250
595/40
33/100
19/40
14/40
10989/40
347/250
47/40
8/40
141/100
240/40
108/40
680/40
70/40
874/40
24/40
A third option would be flex, but I think it's overkill here since you don't really need some of the features, and all the options can be a bit overwhelming. But for completeness, this is more or less what I'd use for flex:
Demo
199/25098/40555/250595/4033/10019/4014/4010989/40347/25047/408/40141/100240/40108/40680/4070/40874/4024/40Code
[sc=gembars][progress="[inventory=Normal Gem]/250"][item=Normal Gem][inventory=Normal Gem]/250[/progress][progress="[inventory=Fire Gem]/40"][item=Fire Gem][inventory=Fire Gem]/40[/progress][progress="[inventory=Water Gem]/250"][item=Water Gem][inventory=Water Gem]/250[/progress][progress="[inventory=Electric Gem]/40"][item=Electric Gem][inventory=Electric Gem]/40[/progress][progress="[inventory=Grass Gem]/100"][item=Grass Gem][inventory=Grass Gem]/100[/progress][progress="[inventory=Ice Gem]/40"][item=Ice Gem][inventory=Ice Gem]/40[/progress][progress="[inventory=Fighting Gem]/40"][item=Fighting Gem][inventory=Fighting Gem]/40[/progress][progress="[inventory=Poison Gem]/40"][item=Poison Gem][inventory=Poison Gem]/40[/progress][progress="[inventory=Ground Gem]/250"][item=Ground Gem][inventory=Ground Gem]/250[/progress][progress="[inventory=Flying Gem]/40"][item=Flying Gem][inventory=Flying Gem]/40[/progress][progress="[inventory=Psychic Gem]/40"][item=Psychic Gem][inventory=Psychic Gem]/40[/progress][progress="[inventory=Bug Gem]/100"][item=Bug Gem][inventory=Bug Gem]/100[/progress][progress="[inventory=Rock Gem]/40"][item=Rock Gem][inventory=Rock Gem]/40[/progress][progress="[inventory=Ghost Gem]/40"][item=Ghost Gem][inventory=Ghost Gem]/40[/progress][progress="[inventory=Dragon Gem]/40"][item=Dragon Gem][inventory=Dragon Gem]/40[/progress][progress="[inventory=Dark Gem]/40"][item=Dark Gem][inventory=Dark Gem]/40[/progress][progress="[inventory=Steel Gem]/40"][item=Steel Gem][inventory=Steel Gem]/40[/progress][progress="[inventory=Fairy Gem]/40"][item=Fairy Gem][inventory=Fairy Gem]/40[/progress][/sc]
[style]
.gembars .expbar {
display: inline-block;
width: 31%;
box-sizing: border-box;
margin-left: 1%;
margin-right: 1%;
}
[/style]
Code
.gembars {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.gembars .expbar {
flex-basis: 31%;
box-sizing: border-box;
}
