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的第二部分TeamSpeak: ts.abendigo.org應該在右側，但是甚至要同時使用已棄用的align="right"和style="text-align: right;" 似乎對span沒有影響。 它們可以與div等其他標簽一起正常工作，但我想將兩個文本保持在同一行。

Answer 1

注意：此答案說明了塊級與內聯元素的工作方式。

text-align屬性僅適用於塊元素。 <span>是inline 。 您應該使用<div>或<p> 。

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

注意：您可以將span設置為block元素，但是除非您的HTML是固定的（由其他應用程序生成）並且不能更改它，否則不要這樣做。 最好保持標准，並使用div或p。

span { display: block; }

要獲得可行的解決方案，您應該使用float: right; 在跨度上。 我不明白為什么您需要使用float:left; 在另一個文本上。

Answer 2

<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> 

Answer 3

的HTML

<div class="container"> <strong>Status:</strong> 
<span class="left">Updated</span>
<span class="right">
<strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>

的CSS

.left {
text-align:left;
color: #01DF3A
}
.right {
float:right;
}

Answer 4

你可以用這個

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

Answer 5

最簡單的方法是使用文本對齊屬性起作用的塊或表：

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

<table width="100%">
    <tr>
        <td><strong>Status:</strong> <span style="color: #01DF3A">Updated</span></td>
        <td style="text-align:right"><span align="right" style="text-align:right"><strong>TeamSpeak:</strong> ts.abendigo.org</span></td>
    </tr>
</table>

試試小提琴： JSFiddle

Answer 6

試試下面的鏈接

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

小提琴-鏈接

Answer 7

的HTML：

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

CSS：

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

演示版