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

短发