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

我有这样的经典代码

<td align="right">

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

但是后来我重构这个 CSS，但是没有右对齐这样的东西吗？我看到文本对齐，是一样的吗？

366591 次浏览
小开
最佳答案

使用

text-align: right

文本对齐 CSS 属性描述 像文本这样的内联内容有多少 在其父块元素中对齐。 文本对齐不控制 块元素本身的对齐, 只有他们的内联内容。

你看

文本对齐

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


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

现在对我起作用的是:

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/

小开

别忘了 CSS3的“第九个孩子”选择器。如果知道要将文本右对齐的列的索引，只需指定

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

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

这里有一个小提琴给你... 。 https://jsfiddle.net/w16c2nad/

小开

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

所提供的答案对于在 td单元格中右对齐文本起到了很好的作用。

这可能不是解决方案时，您正在寻找对齐块元素注释在接受的答案。为了使用块元素来实现这一点，我发现使用页边距是有用的;

一般语法

selector {
margin: top right bottom left;
}

证明正确

td > selector {
/* there is a shorthand, TODO! 🙂 */
margin: auto 0 auto auto;
}

证明中心

td > selector {
margin: auto auto auto auto;
}


/* or the short-hand */
margin: auto;

校准中心

td > selector {
margin: auto;
}

JS 小提琴的例子

或者，您可以让 td内容显示 inline-block，如果这是一个选项的话，但这可能会扭曲其子元素的位置。


提交答案