How to allign objects in DIV straight under each other

Basically title.

Does someone know how to allign the arrows straight under each other?
This is how it is now:

image

Thanks you!

Here is my site Read-Only: https://preview.webflow.com/preview/traffic-more?utm_medium=preview_link&utm_source=designer&utm_content=traffic-more&preview=3a07cc6c91e1440412723d6432c0606c&workflow=preview

Since you’re already using Flex, this is actually pretty straightforward to achieve with just a few tweaks!

Firstly, give your dropdown wrapper (D-39-Dropdown_Background) a set width. I found that 200px is pretty comparable to what you had already, just keep in mind you’ll want to adjust this as needed for your other breakpoints:

image

Now that you’ve got that width set, go into your icon element (Pijl_Dropdown_rechts_Blauw) and change the left margin from 86 to “Auto”. Now that your icons know how far they can “push” themselves over from the text, all of them will stick to the right-most position within that dropdown menu:

Keep in mind that any padding you add to the link block element (D-39-Link_Block) will change how far to the right the icon can sit, but now all of your icons align themselves!

Let me know if you run into any issues :+1:

Thank you Mikeyevin! It works perfectly :slight_smile:

1 Like