Kerrigan D Kerrigan D - 1 year ago 123
CSS Question

Align <HR> to right in IE/Edge

Trying to align a handful of

<hr>
elements to the right on this page.
In IE/Edge, the
<hr>
elements align left in every case.

I am using
<hr class="hr-right">


.hr-right {
text-align: right;
margin-right: 0;
}


I have tried to use floats and clears, but I end up with the
<hr>
being displayed like a float image inside the paragraph.

Answer Source

If you want elements to align-right in a flex container use:

margin-left: auto

not

margin-right: 0;

Flex auto margins work by consuming all available free space.

So margin-left: auto will consume all space to the left of the item, pinning it to the right edge.

More details here:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download