CODEWITHSUNDEEP
htmlcssmautic
KrMa
KrMa

Reputation: 713

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:

<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
                    <span class="newsDate">06-11-2016</span>
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    Hvad er Mautic?
                    <span class="newsDate">06-11-2016</span>
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    Some text
                    <span class="newsDate">06-11-2016</span>
                </a>
            </li>
        </ul>
    </div>
</div>

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

Upvotes: 18

Views: 99384

Answers (3)

Eric N
Eric N

Reputation: 2206

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

Upvotes: 41

Razia sultana
Razia sultana

Reputation: 2211

You can try this:-

 float:right;

Upvotes: 17

Sofiene Djebali
Sofiene Djebali

Reputation: 4508

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

Upvotes: -4

Related Questions