Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides >
iphone ios 17.5.1? and firefox 127.1. no worries if you can't find anything, i'll add the fallback options ^^
Is there a way to sit progress bars beside each other? Even when I put the code side-by-side, not putting it on a line, and even reducing the width of the progress bars with css, it just puts one on top of the other. I was hoping to minimize space taken up by putting a few on one line
Score: 0
TR Code @J.D.Fox
There's a few ways to do it. You can use a table, flex box, or just set them to inline-block with a width setting.
The box sizing setting is important when using % width and margin - without it, the border adds extra width, and even 1px can make the layout behave oddly on different resolutions.
Code
[progress=1/5] Bar 1 [/progress][progress=2/5] Bar 2 [/progress][progress=3/5] Bar 3 [/progress][progress=4/5] Bar 4 [/progress]
[style]
.expbar {
display: inline-block;
width: 48%;
margin: 0.3em 1%;
box-sizing: border-box;
}
[/style]
QUOTE originally posted by Mirzam
There's a few ways to do it. You can use a table, flex box, or just set them to inline-block with a width setting.
The box sizing setting is important when using % width and margin - without it, the border adds extra width, and even 1px can make the layout behave oddly on different resolutions.
Code
[progress=1/5] Bar 1 [/progress][progress=2/5] Bar 2 [/progress][progress=3/5] Bar 3 [/progress][progress=4/5] Bar 4 [/progress]
[style]
.expbar {
display: inline-block;
width: 48%;
margin: 0.3em 1%;
box-sizing: border-box;
}
[/style]
Cannot post: Please log in to post