使用 CSS 在表格单元格中右对齐

Question

我有像这样的旧经典代码，

<td align="right">

它的作用如下：它正确对齐单元格中的内容。 因此，如果我在此单元格中放置两个按钮，它们将出现在单元格的正确位置。

我正在将其重构为 CSS，但似乎没有任何右对齐的内容。我看到text-align，但是是一样的吗？

Answer 1

使用

text-align: right

text-align CSS属性描述
内联内容（如文本）如何
与其父块元素对齐。
文本对齐不控制
块元素本身的对齐方式，
仅其内联内容。

请参阅

文本对齐

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

Answer 2

不要忘记 CSS3 的“nth-child”选择器。如果您知道希望将文本右对齐的列的索引，则只需指定

table tr td:nth-child(2) {
    text-align: right;
}

在大型表的情况下，这可以为您节省大量额外的标记！

这是给你的小提琴...... https://jsfiddle.net/w16c2nad/

Answer 3

现在对我有用的是：

CSS：

.right {
  text-align: right;
  margin-right: 1em;
}

.left {
  text-align: left;
  margin-left: 1em;
}

HTML：

<table width="100%">
  <tbody>
    <tr>
      <td class="left">
        <input id="abort" type="submit" name="abort" value="Back">
        <input id="save" type="submit" name="save" value="Save">
      </td>
      <td class="right">
        <input id="delegate" type="submit" name="delegate" value="Delegate">
        <input id="unassign" type="submit" name="unassign" value="Unassign">
        <input id="complete" type="submit" name="complete" value="Complete">
      </td>
    </tr>
  </tbody>
</table>

请参阅以下小提琴：

http:// /jsfiddle.net/Joysn/3u3SD/

Answer 4

如何在 td 单元格中定位块元素

提供的答案对于在 td 单元格中右对齐文本非常有用。

当您希望按照接受的答案中的注释对齐块元素时，这可能不是解决方案。为了使用块元素实现这一点，我发现使用边距很有用；

一般语法

selector {
  margin: top right bottom left;
}

右对齐

td > selector {

  /* there is a shorthand, TODO!