KrMa KrMa - 1 month ago 10
CSS Question

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 er Mautic?

06-11-2016 : Some text


I would like that the date is right aligned, but only the date. There I thought I could set it in a span? I tried with this html but that is of course not a solution:

HTML

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="footeritem">
<h4>Nyheder</h4>
<ul class="popular-posts">
<li>
<a href="#" target="_blank">

Design In Portfolio&emsp;&emsp;<span class="newsDate">06-11-2016</span>
</a>
</li>
<li>
<a href="#" target="_blank">
Hvad er Mautic? &emsp;&emsp;&emsp;<span class="newsDate">06-11-2016</span>

</a>
</li>
<li>
<a href="#" target="_blank">
Some text&emsp;&emsp;&emsp;<span class="newsDate">06-11-2016</span>

</a>
</li>
</ul>
</div>
</div>


CSS

.newsDate {
font-weight: 100;
text-align: right;
}

Answer

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;".