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

【问题标题】：How to right align span text in a td如何在 td 中右对齐跨度文本
【发布时间】：2018-11-04 18:48:55
【问题描述】：

我正在尝试弄清楚如何右对齐跨度文本

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.

【问题讨论】：

仅供参考：<span>s 默认是内联的！
增加一个td包裹span不是更好，可以更好的控制，这就是表格设计的重点！
@OQJordan 我不能使用第二个 TD，因为当我将鼠标悬停在链接上时，我无法让整行显示背景颜色。

标签： html css html-table

【解决方案1】：

你只需要float内容：

table-css td span {
    float: right;
}

JS Fiddle demo.

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

【讨论】：

【解决方案2】：

<span> 是默认的通用内联容器，你可以使用float 来代替它。

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

Demo

【讨论】：

@Markaway 即使在上面链接的演示中？
我有 .table-css td { display: block; } 和 .table-css td a:hover { background-color: #333; }
那你需要发一个更准确的代表性demo。