在 <td> 内左右对齐答案

【问题标题】：Aligning to left and right inside a <td>在 <td> 内左右对齐
【发布时间】：2010-12-28 20:09:08
【问题描述】：

我正在写一个页面，用于和一些朋友进行角色扮演。当涉及到字符表时，我们希望有一些带有统计信息的表格。我想在每个单元格中都有特征的名称（力量、智力等）和数字。像这样：http://jordi.dyndns-at-home.com:3000/characters/2

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

我已尝试使用但它不起作用。我试过

它确实有效，但它“跳线”，如果我使用 display:inline 它将不起作用。

可以在

上同时对齐吗？

顺便说一句，位置：绝对；对：0 不起作用。它将对齐到

的末尾而不是末尾

【问题讨论】：

把名字和数字放在自己的td里不是更简单吗？
当然可以，但我并不着急，我想在制作该网页时学习。

标签： html css

【解决方案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;
}

这样你可以删除整个表格。

【讨论】：

但我认为我不能放下桌子。我想要那张桌子的样子
@Jordi：给 dl 一些边框（并调整宽度），然后它们看起来像一张桌子。或者更好。

【解决方案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/

鲍勃

【讨论】：

天啊，解决方案很好，但 jsfiddle 很棒！非常感谢！
如果宽度不是静态的，如果我想在% 中给出宽度，我可以给出吗？

【解决方案3】：

虽然我同意 Oli 的评论，但我想你可以通过使用 float:left 和 float:right 来实现。

【讨论】：

【解决方案4】：

如果您在 TD 中放置另一个表格，其中有两个 TD，一个左对齐，一个右对齐，它会起作用，我会否决这样的建议。

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

【讨论】：