HTML/CSS 文本对齐不起作用

Question

我正在使用以下代码进行文本对齐:

<strong>Status:</strong> <span style="color: #01DF3A;">Updated</span>
<span align="right" style="text-align: right;"><strong>TeamSpeak:</strong> ts.abendigo.org</span>

第一个文本 Status: Updated 应该在左边，但是文本的第二部分 TeamSpeak: ts.abendigo.org 应该在右边但是使用即使已弃用的 align="right" 和 style="text-align: right;" 似乎对 span 也没有影响。它们可以与 div 等其他标签配合使用，但我想将两个文本放在同一行。

Answer 1

<span>是一个内联元素。从下面的截图你可以看到它的宽度是188.859px。这就是其中文本的大小。

您必须将内联元素包装在 block 元素中。我建议这样做:

.status {
  float: left;
}
.teamspeak {
  float: right;
}

<div class="status">
  <strong>Status:</strong><span style="color: #01DF3A;">Updated</span>
</div>
<div class="teamspeak">
  <strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>