Question

我试图找出如何正确对齐范围文本

HTML

<div class="table-css">
  <table>
    <tr><td>Text aligned left in row. <span>Text aligned right in row.</span></td></tr>
  </table>
</div>

CSS

.table-css table { width: 600px; }
.table-css td a { display: block; }
.table-css td a:hover { background-color: #333; }
.table-css td span { display: inline; text-align: right; }

结果应该是这样的：

Text aligned left in row.                         Text aligned right in row.

Answer 1

您只需要float内容：

table-css td span {
    float: right;
}

JS Fiddle demo

您的方法存在的问题是display: inline元素只会占用其内容所需的宽度;这意味着虽然它可以将文本与右边对齐，但它不会被明显移动，因为元素只有其内容的宽度。

Answer 2

<span>是通用内联容器，默认情况下，您可以使用float来对齐它。

.table-css td span { float:right; }

如何在td中右对齐跨度文本

2 个答案:

Demo