文本在跨度内右对齐

Question

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

04-11-2016 : 作品集设计

05-11-2016 : 赫瓦德莫蒂奇？

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

原文由 KrMa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

编辑。有人在现已删除的评论中否决了浮动的想法。当左侧的文本变得太大时，浮动确实会带来一些布局丑陋。您可以改用一种奇特的 flex 解决方案，它可以更好地适应不同的上下文。

对于 flex，将锚点设置为 "display: flex" 并将跨度设置为 "flex: 1; text-align: right; white-space: nowrap;" 。

原文由 Eric N 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以试试这个：-

  float:right;

原文由 Razia sultana 发布，翻译遵循 CC BY-SA 3.0 许可协议