文本在一个范围内对齐 [英] text align right in a span

问题描述

我有点怀疑我是如何解决这个问题的最好方法。在此页面的页脚中：投资组合，有以下内容：

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

解决方案

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

这篇关于文本在一个范围内对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！