文本在一个范围内对齐

Question

我有点怀疑我如何以最好的方式解决这个问题.在本页面的页脚:Portfolio,有以下内容:

04-11-2016:投资组合设计

2016-11-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,将锚点设置为"display:flex",将span设置为"flex:1; text-align:right; white-space:nowrap;".

Answer 2

你可以试试这个: -

 float:right;