How can you put all these progress bars in one straight line ?

Question

Can the irregularities in the following code of progress bar be Aligned straight vertically ?
I tried giving some margins to the <span> tag inside but didn't help . Any suggestions?
https://code.sololearn.com/Ww6f0Yr52ffG/?ref=app

Answer 1

<!-- Maybe something like that (where you have indication in comments to customize alignements): -->

<div id="_progWrapper">
<p> <span class="_prog"> HTML: </span>
<progress min="0" max="100" value="90"> </progress>
</p>
<p> <span class="_prog"> CSS: </span>
<progress min="0" max="100" value="90"> </progress>
</p>
<!-- you've forgot the <p> container here ;P -->
<p>
<span class="_prog"> JavaScript : </span>
<progress min="0" max="100" value="60"> </progress>
</p>
<p> <span class="_prog"> Python: </span>
<progress min="0" max="100" value="40"> </progress>
</p>
<p> <span class="_prog"> C/C++ : </span>
<progress min="0" max="100" value="30"> </progress>
</p>
<p> <span class="_prog"> Arduino : </span>
<progress min="0" max="100" value="60"> </progress>
</p>
<p> <span class="_prog"> PLCC : </span>
<progress min="0" max="100" value="70"> </progress>
</p>
</div>

<style>
#_progWrapper {
display:table;
border-spacing:1ex; /* some spacing between cells... or not ^^ */
/* text-align: center; */
margin-left:auto; /* margin-left:auto for right align, margin-right:auto or none for left align */
}
#_progWrapper p span, #_progWrapper p progress {
display:table-cell;
}
#_progWrapper p span {
text-align:right; /* can be also aligned to left, or center... inside the span-cell ;) */
}
#_progWrapper p {
display:table-row; /* inline-block; */
/* margin:0 1ex; /* some margin to avoid each stick together */
}
</style>

<!-- html part with container wrapper still added and styles part not integrated with your last version, just reworked as is, with this rules... required, even if overriding yours previous declaration ;) -->

Answer 2

You could use at least two ways to achieve your goal... 'float' is one way, but need in your context to be applied to the <p> elements containers of your <progress>s (also need to 'clear' the first next element for avoiding get inlined with previous floating content -- in your context the next <hr> element)...

Anyway, one other way is to set 'display:inline-block' css property of these <p>, so they will be inlined each together, and can be aligned to center (not possible with 'float' property which is necessarly 'right' or 'left' only) with a wrapper to set-it the 'text-align:center' css property/value:

<!-- changed part of code -->

<div id="_progWrapper">
<p> <span class="_prog"> HTML: </span>
<progress min="0" max="100" value="90"> </progress>
</p>
<p> <span class="_prog"> CSS: </span>
<progress min="0" max="100" value="90"> </progress>
</p>
<!-- you've forgot the <p> container here ;P -->
<p>
<span class="_prog"> JavaScript : </span>
<progress min="0" max="100" value="60"> </progress>
</p>
<p> <span class="_prog"> Python: </span>
<progress min="0" max="100" value="40"> </progress>
</p>
<p> <span class="_prog"> C/C++ : </span>
<progress min="0" max="100" value="30"> </progress>
</p>
<p> <span class="_prog"> Arduino : </span>
<progress min="0" max="100" value="60"> </progress>
</p>
<p> <span class="_prog"> PLCC : </span>
<progress min="0" max="100" value="70"> </progress>
</p>
</div>

<style>
#_progWrapper {
text-align:center;
}
#_progWrapper p {
display:inline-block;
margin:0 1ex; /* some margin to avoid each stick together */
}
._prog {
font-family: "Gloria Hallelujah", sans-serif;
font-size: x-large;
color: #4195B0;
margin-right: 10px;
text-shadow:2px 3px 3px gray;
}
progress {
color: #0063a6;
border: 1px solid #0063a6;
background: #fff;
}
</style>

Answer 3

progress {
float: right;
}

Answer 4

(with my mod', your margins are no more applied and can be removed -- display:table-cell doesn't support 'margin', but support 'padding' if needed ^^)

Answer 5

Thank you . but I wanted the progress bars to be Aligned in straight vertical line like "float" does but float just disrupts the inlining of progress bars and text .
Believe I should just mix the two up .

Thank you

Answer 6

would do it ty

Answer 7

Just added different classes to different "progress" tags and different margins and aligned them vertically in line without losing the inlining as in "float"
If any shorter and more efficient way of achieving it . would love to hear it .

Answer 8

Thank you . That works .
used margin :inherit for left align though . :)