Html 在a内左右对齐<；td>；

我正在写一个页面，与一些朋友进行角色扮演。当涉及到字符表时，我们希望有一些统计表。 我希望在每个细胞内都有特征（力量、智力等）的名称和编号。像这样：

我想把名字和单元格的左边对齐，把数字和右边对齐

我试过了，但不起作用。 我已经尝试过了，它确实可以工作，但它“跳过一条线”，如果我使用display:inline，它将无法工作

两条路线可能都在同一条直线上

---

顺便说一句：绝对位置；右：0将不起作用。它将与的结尾对齐，而不是使用定义列表的结尾，并且是语义的

HTML

---

通过这种方式，您可以删除整个表。

虽然我同意奥利的意见，但我想您可以通过使用

浮点：左

和

浮点：右

来实现它。下面是一个示例：

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

希望这对你有所帮助。这里有一个JSFIDLE供您使用

---

Bob

如果你在TD中放置另一个表，其中两个TD，一个左对齐，一个右对齐，它会起作用，我会投票支持这样的建议

---

另一种机制是使用@rcravens建议的display:inline block，这是我个人的选择。

把名字和数字放在他们自己的td中不是更容易吗？当然可以，但我并不着急，我想在制作网页时学习。OMG，解决方案很好，但是JSFIDLE很棒！非常感谢！如果宽度不是静态的，如果我想在

%

中给出宽度，我可以给出它吗？但我认为我不能放弃表格。我想要那张桌子look@Jordi：给dl加上一些边框（并调整宽度），这样它们看起来就像一张桌子。或者更好。

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

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