Justify-content: right does not place the item on the right

Question

Justify-content: right does not place the item on the right

Navigation

#1 by (4 votes)
#2 by (2 votes)

3

I do not know if I'm complicating my life. All I want is for the part where the percentage with the background color appears, appears aligned to the right, just like the numbers above. I am using display:flex and justify-content:right , that I understand that I should move all the content to the right, but it is not like that.

<div style="max-width:20%;display:flex;flex-wrap:wrap;">
  <p class="old-price" style="width:100%;text-decoration: line-through;text-align:right;">19.99€</p>
  <p class="current-price" style="width:100%;font-size:18px;text-align:right;margin-top:4px;">24.99€</p>
    <div style="display:flex;flex-wrap:wrap;justify-content:right;width:100%;">
      <div style="background:#ff5454;display:flex;padding:3px;margin-top:4px;width:55px;justify-content: right;" class="current-discount">
        <p style="margin:auto;color:white;font-weight:500;">+21%</p>
      </div>
    </div>                                               
  </div>

css

asked by JetLagFox 14.01.2018 в 19:35

source

2 answers

2

You do not need the display: flex; justify-content: right in the second div , with put text-align:right will be aligned to the right

<div style="max-width:20%;display:flex;flex-wrap:wrap;">
  <p class="old-price" style="width:100%;text-decoration: line-through;text-align:right;">19.99€</p>
  <p class="current-price" style="width:100%;font-size:18px;text-align:right;margin-top:4px;">24.99€</p>
  <div style="display:flex;flex-wrap:wrap;justify-content:right;width:100%;">
    <div style="background:#ff5454;padding:3px 0 3px 3px;margin-top:4px;width:55px;text-align: right;" class="current-discount">
      <p style="margin:auto;color:white;font-weight:500;">+21%</p>
    </div>
  </div>
</div>

answered by 14.01.2018 в 19:48

what is the best way to not use many if? Doubt with arrays in C ++

score 4 · Accepted Answer

Simply add a margin-left: auto to the div that contains the number with your percentage.

On the other hand, it is not necessary to include this div within another, you could directly align the div that contains the text, so you could delete the one containing that div .

To align the text within your div to the right simply add text-align: right .

Your modified example:

<div style="max-width:20%;display:flex;flex-wrap:wrap;">
  <p class="old-price" style="width:100%;text-decoration: line-through;text-align:right;">19.99€</p>
  <p class="current-price" style="width:100%;font-size:18px;text-align:right;margin-top:4px;">24.99€</p>
      <div style="background:#ff5454;text-align:right;padding:3px;margin-top:4px;width:55px; margin-left: auto;" class="current-discount">
        <p style="margin:auto;color:white;font-weight:500;">+21%</p>
      </div>
    </div>

IMPORTANT : I recommend that you never use or as much as possible inline styles, that is, that they are in the element itself with the attribute style . Otherwise, use ID's or classes in an external file.

You can consult this question for more information: How to add CSS code to my page?

You can also check this self-answer question from me talking about why you should not use inline styles: What is and for what is the specificity of CSS?