在内向左和向右对齐[英]Aligning to left and right inside a 本文翻译自 Jordi 查看原文 2010-12-28 39800 css/

I am writing a page for role-playing with some friends. When it comes to the character sheet we would like to have some tables with the statistics. I would like to have inside every cell the name of the characteristic (strength, intelligence, etc.) and the number. Like this: http://jordi.dyndns-at-home.com:3000/characters/2

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

I would like to align the names to the left side of the cell and the numbers to the right side.

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

I have tried with <span style="text-align:right;"> and it will not work. I have tried with <div style="text-align:right;"> and it does work but it "jumps a line", if I use display:inline it will not work.

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

它确实有效，但如果我使用display，它会“跳出一条线”：内联它将无效。

It is possible to have both alignments on a <td> ?

可以在上进行两个对齐吗？

BTW position:absolute; right:0 won't work. it will align to the end of the not the end of the

BTW位置：绝对;右：0不起作用。它将对齐到结束而不是结束

4 个解决方案

#1

Use definition lists and be semantic.

使用定义列表并且是语义的。

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

This way you can drop the whole table.

这样你可以放弃整个表。

#2

Here is an example:

这是一个例子：

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

With the following CSS:

使用以下CSS：

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

Hope you find this helpful. Here is a jsFiddle for you to mess with.

希望你觉得这很有帮助。这是一个让你搞砸的jsFiddle。

http://jsfiddle.net/K4fGq/

Bob

短发

#3

Although I agree with Oli's comment, I guess you can achieve it by using float:left and float:right.

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

#4

If you put another table inside the TD with two TD's, one left and one right aligned, it will work and I will get down voted for such a suggestion.

如果你把另一张桌子放在TD里面有两个TD，一个左边和一个右边对齐，它会工作，我会投票给这样的建议。

Another mechanism is to use display: inline-block as suggested by @rcravens -- my personal choice.

另一种机制是使用display：inline-block，如@rcravens所建议的那样 - 我个人的选择。

#1