CODEWITHSUNDEEP
htmlcssdjango
Colle
Colle

Reputation: 154

HTML: Align progress bars vertically

I have a list of items with a progress bar each: enter image description here

What I want is that all progress bars are aligned, no matter how long the text on the left is. (I already know how long the longest text on the left will be)
The code snippet (in Django):

<strong style="font-family:Arial">{{ score.0 }}</strong>
<progress value="{{ score.1 }}" max="10" style="margin-left: 5%"></progress>

style="margin-left: 5%" doesn't work because it's relative to the corresponding text. I already tried using "vertical-align" variations, but nothing worked.

Upvotes: 0

Views: 341

Answers (3)

Gibin Ealias
Gibin Ealias

Reputation: 2859

Can be achieved by 2 lines of CSS.

And, given below is a sample HTML structure FYR.

strong{
  display: inline-block;
  min-width: 250px;
}
<strong style="font-family:Arial">Text</strong>
<progress value="3" max="10" style="margin-left: 5%"></progress>
<strong style="font-family:Arial">Longer Text</strong>
<progress value="3" max="10" style="margin-left: 5%"></progress>
<strong style="font-family:Arial">Even Longer Text</strong>
<progress value="3" max="10" style="margin-left: 5%"></progress>

Upvotes: 0

Capagris
Capagris

Reputation: 3841

It depends how to you want to approach it, one way would be to give all the texts the same length via css, for example:

<strong style="width:200px;">text goes here</strong>
<progress></progress>

The other way, would be to have both the <strong> and the <progress> inside a container, a wrapper of sorts, and then give that container some flex rules to make both elements go to the opposite ends, like this:

<div class="container">
<strong>text</strong>
<progress></progress>
</div><!-- .container -->

and for the css

.container {
display:flex;
width:100%;
flex-direction:row;
justify-content:space-between;
align-items:center;
}

strong {width:200px;} // or 50%;
progress (width:200px;} //or 50% or whatever you need

Upvotes: 1

Kosh
Kosh

Reputation: 18413

Here you are using flex:

section {
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
}

strong, progress {
  flex-basis: 50%
}
<section>
  <strong>text</strong>
  <progress value="1" max="10"></progress>
  <br>
  <strong>longer text</strong>
  <progress value="1" max="10"></progress>
  <br>
  <strong>even longer text</strong>
  <progress value="1" max="10"></progress>
</section>

Upvotes: 1

Related Questions