Text Align Right In A Span

I am a little bit in doubt how I solve this the best way. In the footer of this page: Portfolio , there is the following: 04-11-2016 : Design In Portfolio 05-11-2016 : Hvad

Solution 1:

Its contained inside a block element so add "float: right" to those spans to get your right alignment =).

Edit. Someone shot down the float idea in a now deleted comment. Floating does present some layout ugliness for when your text on the left becomes too large. You could instead use a fancy flex solution that will hold up across different context a bit better.

For flex, set the anchor to "display: flex" and the span to "flex: 1; text-align: right; white-space: nowrap;".

Solution 2:

You can try this:-

float:right;

Solution 3:

1. Put your span outside the link
2. Make sure your li is in display block (or inline-block with defined width)
3. float right your span

CSS

span { float: right; }

HTML

<li><ahref="#"target="_blank">
            Hvad er Mautic? &emsp;&emsp;&emsp;</a><spanclass="newsDate">06-11-2016</span></li>