在同一 HTML 表格单元格中右对齐和左对齐文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2089820/
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
Right align and left align text in same HTML table cell
提问by Brian
I have a cell in an HTML <table>. I would like part of the cell contents to be left justified and part to be right justified. Is this possible?
我在 HTML 中有一个单元格<table>。我希望单元格内容的一部分左对齐，一部分右对齐。这可能吗？
回答by Tor Valamo
If you want them on separate lines do what Balon said. If you want them on the same lines, do:
如果您希望它们在不同的行上，请按照 Balon 所说的进行操作。如果您希望它们在同一行上，请执行以下操作：
<td>
<div style="float:left;width:50%;">this is left</div>
<div style="float:right;width:50%;">this is right</div>
</td>
回答by Iain
I came up with this while trying to figure out how to display currency ('$' to left, number to right) in table cells:
我在试图弄清楚如何在表格单元格中显示货币（'$' 向左，数字向右）时想到了这个：
<div class="currency">20.34</div>
.currency {
text-align: right;
}
.currency:before {
content: "$";
float: left;
padding-right: 4px;
}
回答by James Thomas
It is possible but how depends on what you are trying to accomplish. If it's this:
这是可能的，但如何取决于您要完成的任务。如果是这样：
| Left-aligned Right-aligned | in one cell then you can use floating divs inside the td tag:
| 左对齐右对齐 | 在一个单元格中，您可以在 td 标签内使用浮动 div：
<td>
<div style='float: left; text-align: left'>Left-aligned</div>
<div style='float: right; text-align: right'>Right-aligned</div>
</td>
If it's
| Left-aligned
Right Aligned |
如果是 | 左对齐
右对齐 |
Then Balon's solution is correct.
那么Balon的解决方案是正确的。
If it's: | Left-aligned | Right-Aligned |
如果是： | 左对齐 | 右对齐 |
Then it's:
然后是：
<td align="left">Left-aligned</td>
<td align="right">Right-Aligned</td>
回答by kjagiello
Do you mean like this?
你的意思是这样吗？
<!-- ... --->
<td>
this text should be left justified
and this text should be right justified?
</td>
<!-- ... --->
If yes
如果是
<!-- ... --->
<td>
<p style="text-align: left;">this text should be left justified</p>
<p style="text-align: right;">and this text should be right justified?</p>
</td>
<!-- ... --->
回答by Sergiu
Tor Valamo's answer with a little contribution form my side: use the attribute "nowrap" in the "td" element, and you can remove the "width" specification. Hope it helps.
Tor Valamo 的回答对我有一点贡献：在“td”元素中使用属性“nowrap”，您可以删除“width”规范。希望能帮助到你。
<td nowrap>
<div style="float:left;">this is left</div>
<div style="float:right;">this is right</div>
</td>
回答by LukeP
td style is not necessary but will make it easier to see this example in browser
td 样式不是必需的，但会更容易在浏览器中查看此示例
<table>
<tr>
<td style="border: 1px solid black; width: 200px;">
<div style="width: 50%; float: left; text-align: left;">left</div>
<div style="width: 50%; float: left; text-align: right;">right</div>
</td>
</tr>
</table>
回答by Paulo Santos
You could use something like:
你可以使用类似的东西：
<td>
<div style="float:left;width:49%;text-align:left;">this is left</div>
<div style="float:right;width:49%;text-align:right;">this is right</div>
</td>
The 49%is to give some room for the renderer to wrap things around.
这49%是为了给渲染器一些空间来包装东西。
And you can use either <div>or <span>
你可以使用<div>或<span>
回答by prodigitalson
sure but you need to wrap those "blocks" in separate tags and apply the alignment to those.
当然可以，但您需要将这些“块”包装在单独的标签中，并将对齐应用到这些标签中。
