在span中右对齐文本

Question

我有些疑虑，不知道最好的解决方式是什么。在这个页面的页脚：Portfolio，有以下内容：

04-11-2016 : Design In Portfolio

05-11-2016 : Hvad er Mautic?

06-11-2016 : Some text

我想让日期右对齐，但只有日期。我想过将其设置为span标签，尝试了以下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

---

你试过使用 float: right 吗？ - leofontes

当然，非常感谢，它可以工作。将其设置在span中可以吗？ - KrMa

没问题，很高兴能帮忙。 - leofontes

Answer 1

它被包含在块元素中，因此将 "float:right" 添加到这些span中以获得右对齐 =)。

编辑。有人在现在已删除的评论中否决了浮动想法。当左侧文本变得太大时，浮动确实会造成一些布局上的不美观。您可以使用精巧的flex解决方案，它在不同上下文中都能更好地维持。

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

- Eric N

---

非常感谢您提供的解决方案。我会稍微了解一下。 - KrMa

感谢这个解决方案。然而，在我的情况下，当我有跨越多行的文本时，span 中的部分突然垂直对齐到顶部，我遇到了一些问题。我通过添加 "align-self: flex-end;" 解决了这个问题。 - Kasper Kamperman

Answer 2

您可以尝试这个：-

 float:right;

- Razia sultana

Answer 3

1. 将你的 span 放在链接外面
2. 确保你的 li 显示为块级元素（或者是定义了宽度的内联块级元素）
3. 将你的 span 右浮动

CSS

span { float: right; }

HTML

    <li>
        <a href="#" target="_blank">
            Hvad er Mautic? &emsp;&emsp;&emsp;
        </a>
        <span class="newsDate">06-11-2016</span>
    </li>

- Sofiene Djebali

---

你可以为所有使用该CSS的span元素创建CSS样式，但是你有一个类。也许你可以在CSS声明中使用这个类，如"span.newsDate { float: right; }"，这将仅改变<span class="newsDate">中的样式。 - Morticia A. Addams