右对齐并左对齐同一HTML表格单元格中的文本

时间:2010-01-18 22:55:57

标签: html css

我在HTML <table>中有一个单元格。我希望细胞内容的一部分是左对齐的,而部分是正确的。这可能吗?

8 个答案:

答案 0 :(得分:82)

如果你想要它们分开,请按照Balon所说的做。如果你想要它们在同一行,请执行:

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

答案 1 :(得分:10)

我试图弄清楚如何在表格单元格中显示货币(左边的'$',右边的数字),我想出了这个:

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

.currency {
   text-align: right;
}

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

答案 2 :(得分:9)

这是可能的,但取决于你想要完成什么。如果是这样的话:

|左对齐右对齐|在一个单元格中,您可以在td标记内使用浮动div:

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

答案 3 :(得分:3)

你的意思是这样吗?

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

答案 4 :(得分:3)

Tor Valamo的回答有点贡献在我的身边:在“td”元素中使用属性“nowrap”,你可以删除“宽度”规范。希望它有所帮助。

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

答案 5 :(得分:2)

样式不是必需的,但可以更容易在浏览器中看到此示例

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

答案 6 :(得分:0)

确定但您需要将这些“块”包装在单独的标签中并将对齐应用于那些。

答案 7 :(得分:0)

您可以使用以下内容:

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