text align right in a span

Question

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;
}

Of course, thank you a lot, that is working. Is it okay to set that in a span? — KrMa, Nov 04 '16 at 16:27

score 38 · Accepted Answer · edited Jan 01 '21 at 19:58

38

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

edited Jan 01 '21 at 19:58

Mayur Satav

985
2
12
32

answered Nov 04 '16 at 16:27

Eric N

2,136
13
13

Thank you a lot for this solution. I will just read a little bit up on that – KrMa Nov 04 '16 at 17:01
Thanks for this solution. However, in my scenario I had some problems that the part in the span was suddenly vertical-aligned to top when I had text spanning multiple lines. I solved this by adding "align-self: flex-end;" – Kasper Kamperman Jan 07 '22 at 13:17

Razia sultana · Answer 2 · 2016-12-01T16:02:01.670

17

You can try this:-

 float:right;

edited Dec 01 '16 at 16:02

answered Nov 04 '16 at 16:37

Razia sultana

2,168
3
15
20

score -4 · Answer 3 · answered Nov 04 '16 at 16:34

-4

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

CSS

span { float: right; }

HTML

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

answered Nov 04 '16 at 16:34

Sofiene Djebali

4,398
1
21
27

You create CSS style for all spans that use that CSS but you have class. Maybe you can use that class in the CSS declaration as "span.newsDate { float: right; }" which will change the style only in . – Morticia A. Addams Aug 07 '23 at 12:41

text align right in a span

3 Answers3

Linked