Html 在 <td> 中左右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4549113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aligning to left and right inside a <td>
提问by Jordi
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.
我试过 <span style="text-align:right;"> 但它不起作用。我已经尝试过 <div style="text-align:right;"> 并且它确实有效，但它“跳了一行”，如果我使用 display:inline 它将不起作用。
It is possible to have both alignments on a <td> ?
可以在 <td> 上同时进行两个对齐吗？
BTW position:absolute; right:0 won't work. it will align to the end of the not the end of the
BTW 位置：绝对；右：0 不起作用。它将对齐到结尾而不是结尾
回答by erenon
Use definition lists and be semantic.
使用定义列表并具有语义。
HTML
HTML
<table><tr><td>
<dl>
<dt>Life:</dt>
<dd>15</dd>
</dl>
</td></tr></table>
CSS
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.
这样您就可以删除整个表。
回答by rcravens
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 供您使用。
Bob
鲍勃
回答by Don
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.
另一种机制是使用 @rcravens 建议的 display: inline-block —— 我个人的选择。
回答by jeroen
Although I agree with Oli's comment, I guess you can achieve it by using float:leftand float:right.
虽然我同意 Oli 的评论，但我想您可以通过使用float:leftand来实现它float:right。
