Question

我正在和一些朋友一起写角色扮演的页面。说到角色表，我们想要一些带有统计数据的表格。我想在每个单元格中都有特征（强度，智力等）和数字的名称。像这样：http://jordi.dyndns-at-home.com:3000/characters/2

我想将名称对齐到单元格的左侧，将数字对齐到右侧。

我尝试使用＆lt; span style =“text-align：right;”＆gt;它不会起作用。我试过用＆lt; div style =“text-align：right;”＆gt;它确实有效，但如果我使用display，它会“跳出一条线”：内联它将无效。

可以在＆lt; td＆gt;上进行两种比对。？

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所建议 - 我个人的选择。

在左边和右边对齐a

4 个答案: