在左邊和右邊對齊a <td>

Question

我正在寫一個與一些朋友角色扮演的頁面。 說到角色表，我們想要一些帶有統計數據的表格。 我想在每個單元格中都有特征（強度，智力等）和數字的名稱。 像這樣： http ： //jordi.dyndns-at-home.com ： 3000/characters/2

我想將名稱對齊到單元格的左側，將數字對齊到右側。

我嘗試使用<span style =“text-align：right;”>並且它不起作用。 我嘗試過使用<div style =“text-align：right;”>並且它確實有效，但如果我使用display，它會“跳出一條線”：內聯它將無效。

可以在<td>上進行兩個對齊嗎？

BTW位置：絕對; 右：0不起作用。 它將對齊到結束而不是結束

Answer 1

使用定義列表並且是語義的。

HTML

<table><tr><td>
    <dl>
        <dt>Life:</dt>
        <dd>15</dd>
    </dl>
</td></tr></table>

CSS

dl {
    width: 200px;
}
dl dt {
    width: 160px;
    float: left;
    padding: 0;
    margin: 0;
}
dl dd {
    width: 40px;
    float: left;
    padding: 0;
    margin: 0;
}

這樣你就可以放棄整個表格了。

Answer 2

這是一個例子：

<table>
    <tr>
        <td>
            <span class='name'>name 1</span><span class='number'>100</span>
        </td>
    </tr>
</table>

使用以下CSS：

.name{
    width: 200px;
    display: inline-block;
}
.number{
    width: 200px; 
    display: inline-block;  
    text-align: right;
}

希望你覺得這很有幫助。 這是一個讓你搞砸的jsFiddle。

http://jsfiddle.net/K4fGq/

短發

Answer 3

雖然我同意Oli的評論，但我猜你可以通過使用float:left和float:right來實現它。

Answer 4

如果你把另一張桌子放在TD里面有兩個TD，一個左邊和一個右邊對齊，它會起作用，我會投票給這樣一個建議。

另一種機制是使用display：inline-block，如@rcravens所建議的那樣 - 我個人的選擇。