html - 文本在范围内右对齐

Question

我有点怀疑如何以最好的方式解决这个问题。在此页面的页脚：Portfolio中，有以下内容：

04-11-2016 : 组合设计

2016 年 5 月 11 日：Hvad er Mautic？

06-11-2016 : 一些文字

我希望日期正确对齐，但只有日期。在那里我想我可以把它设置成一个跨度？我尝试使用此 html 但这当然不是解决方案：

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 1

它包含在一个块元素中，因此添加"float: right"到这些跨度以获得正确的对齐 =)。

编辑。有人在现已删除的评论中否定了浮动的想法。当左侧的文本变得太大时，浮动确实会出现一些布局丑陋。您可以改为使用花哨的 flex 解决方案，它可以更好地支持不同的上下文。

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

Answer 2

You can try this:-

 float:right;

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