在同一HTML表格单元格中右对齐和左对齐文本

Question

我在HTML的<table>中有一个单元格。我希望单元格的一部分内容左对齐，另一部分右对齐。这种操作可能吗？

- Brian

---

他的意思是“对齐”。我注意到人们经常混淆“对齐”和“调整”，没有区分两者，其中“调整”是指齐边缘，“对齐”是指不齐边缘。实际上，在许多应用程序中只有“左对齐”。 - prodigitalson

谢谢您的纠正 - 我想我是那些困惑的人之一。 - duffymo

我很困惑为什么我使用了“justify”而不是“aligned”。抱歉。 - LukeP

Answer 1

如果您想让它们分别显示在不同行，请按照Balon所说的做。如果您想要它们显示在同一行上，请执行以下操作：

<td>
  <div style="float:left;width:50%;">this is left</div>
  <div style="float:right;width:50%;">this is right</div>
</td>

- Tor Valamo

---

为什么在这里使用float，而不是直接在同一个元素上使用text-align呢？ - prodigitalson

然后 <div style="float: right; text-align: right; width: 50%;">this is right</div> - kjagiello

@Luke：哦，我明白你们的意思了...创建列，这可能是他所要求的自然解释... :-) - prodigitalson

有没有办法防止“this is left”和“this is right”中出现换行？我的td没有指定宽度，而且我的页面有足够的空间，但浏览器仍然会插入一个换行符。 - Brian

你可以删除左侧文本周围的div，只需将右侧浮动即可。然后你也可以删除宽度设置。 - Tor Valamo

@TorValamo，那对我没用，它使文本溢出了td。 - elig

Answer 2

我在尝试如何在表格单元格中显示货币（'$'在左侧，数字在右侧）时想到了这个：

<div class="currency">20.34</div>

.currency {
   text-align: right;
}

.currency:before {
   content: "$";
   float: left;
   padding-right: 4px;
}

- Iain

---

我认为这个答案更优秀的原因如下：单元格是实际值，因此可以像数字一样处理，例如，如果用户复制它，则值会更干净地粘贴到Excel中；如果您添加一个类似sorttable的js库，它将更好地识别这些值，并且代码也更少。 - Joel Davis

Answer 3

这是可能的，但具体如何取决于您想要实现什么目标。如果您想要在一个单元格中实现左对齐和右对齐，则可以在标记内使用浮动

标记：

<td>
<div style='float: left; text-align: left'>Left-aligned</div>
<div style='float: right; text-align: right'>Right-aligned</div>
</td>

如果它是：
| 左对齐
                右对齐 |

那么 Balon 的解决方案是正确的。

如果它是：
| 左对齐    |   右对齐 |

那么它是：

<td align="left">Left-aligned</td>
<td align="right">Right-Aligned</td>

- James Thomas

---

HTML的align属性自HTML 5起已被弃用。 - BairDev

Answer 4

Tor Valamo的回答，我在这里做出一点贡献：在“td”元素中使用属性“nowrap”，就可以去掉“width”规定。希望能对您有所帮助。

<td nowrap>
  <div style="float:left;">this is left</div>
  <div style="float:right;">this is right</div>
</td>

- Sergiu

Answer 5

你是指像这样吗？

<!-- ... --->
<td>
   this text should be left justified
   and this text should be right justified?
</td>
<!-- ... --->

如果是这样的话

<!-- ... --->
<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>
<!-- ... --->

- kjagiello

---

我认为这不是原帖作者想要的。我的猜测是他需要一个解决方案，使得这两个字符串相邻放置 - “在同一行”。 - Jørn Schou-Rode

你可能是对的。我不确定他具体要求什么。无论如何，我会留下我的评论，因为它可能对某些人有用。 - kjagiello

Answer 6

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>

- LukeP

Answer 7

你可以使用类似以下的内容：

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

49% 是为了给渲染器留出一些空间来换行。

您可以使用 <div> 或 <span>。

- Paulo Santos

---

如果您使用span标签，您还必须设置display:block属性才能使宽度属性生效。 - Justin Johnson