Html 文本在跨度中右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40427457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text align right in a span
提问by KrMa
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
04-11-2016 : 投资组合中的设计
05-11-2016：Hvad er Mautic？
06-11-2016 : 一些文字
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 但这当然不是一个解决方案：
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  <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
CSS
.newsDate {
font-weight: 100;
text-align: right;
}
回答by Eric N
Its contained inside a block element so add "float: right" to those spans to get your right alignment =).
它包含在一个块元素中，因此向这些跨度添加“float：right”以获得正确的对齐=）。
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.
编辑。有人在现已删除的评论中驳回了浮动想法。当左侧的文本变得太大时，浮动确实会呈现一些布局丑陋。你可以改用一种奇特的 flex 解决方案，它可以更好地适应不同的上下文。
For flex, set the anchor to "display: flex" and the span to "flex: 1; text-align: right; white-space: nowrap;".
对于 flex，将锚点设置为“display: flex”，将 span 设置为“flex: 1; text-align: right; white-space: nowrap;”。
回答by Razia sultana
You can try this:-
你可以试试这个：-
float:right;
回答by Sofiene Djebali
- Put your span outside the link
- Make sure your li is in display block (or inline-block with defined width)
- float right your span
- 将您的跨度放在链接之外
- 确保您的 li 在显示块（或具有定义宽度的内联块）中
- 漂浮在你的跨度上
CSS
CSS
span { float: right; }
HTML
HTML
<li>
<a href="#" target="_blank">
Hvad er Mautic?    
</a>
<span class="newsDate">06-11-2016</span>
</li>
