内部の左右に整列​​

Question

私はいくつかの友達とロールプレイングのためのページを書いています。キャラクターシートについては、統計を持つテーブルがいくつかあります。 私はすべての細胞の中に特徴（強さ、知性など）の名前と番号を持っていたいと思います。このように：http://jordi.dyndns-at-home.com:3000/characters/2

セルの左側に名前を、右側に数字を並べ替えるとします。

私は<で試しました。span style = "text-align：right;" >これは動作しません。 私は試しました< div style = "text-align：right;" >と動作しますが、display：inlineを使用すると "行をジャンプ"しますが、動作しません。

<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

私はOliのコメントに同意しますが、私はfloat:leftとfloat:rightを使って達成できると思います。ここで

Answer 3

は一例である：以下CSSで

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

：

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

は、あなたが、これが参考願っています。ここにあなたが混乱するjsFiddleがあります。

http://jsfiddle.net/K4fGq/

ボブ

Answer 4

次の2つのTDの、1つの左1つの右詰めでTD内の別のテーブルを置く場合は、それがうまくいくと、私が降り、このような提案に投票します。

もう1つのメカニズムは、display：inline-blockを@rcravensの示唆通りに使用することです。私の個人的な選択です。