我有点怀疑我是如何解决这个问题的最好方法。在此页面的页脚中：投资组合，有以下内容：
04-11-2016：设计组合
05-11-2016：Hvad er Mautic？ p>
06-11-2016：一些文字
我希望日期是正确的，但只有日期。在那里我想我可以把它放在一个跨度？我尝试过使用这个html，但这当然不是解决方案： $ b 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> 一些文字& emsp;& emsp;& emsp;< span class =newsDate> 06-11-2016< / span> < / a> < / li> < / ul> < / div> < / div>CSS .newsDate { font-weight：100; text-align：right; }
解决方案
所以为这些跨度添加float：right以获得您的正确对齐=）。
编辑。有人在现在删除的评论中击败了浮点创意。当左边的文字变得太大时，浮动会出现一些布局丑陋。你可以使用一个奇特的柔性解决方案，它可以在不同的环境下保持更好的效果。
对于flex，将锚设置为display：flex，跨度设置为flex：1; text-align：right; white-space：nowrap;。
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  <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>CSS
.newsDate { font-weight: 100; text-align: right; }解决方案
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;".
更多推荐
文本在一个范围内对齐
发布评论