用表格单元格与CSS正确alignment

我有这样的旧经典代码

<td align="right"> 

这就是说：它正确地alignment单元格中的内容。 所以如果我把2个button放在这个单元格中，他们将出现在单元格的右边。

但后来我重构了这个CSS，但没有这样的东西，正确的alignment？ 我看到文本alignment，是一样的吗？

Answer 1

使用

 text-align: right 

文本alignment的CSS属性描述了像文本这样的内联内容是如何在其父块元素中alignment的。 文本alignment不控制块元素本身的alignment，只有他们的内联内容。

看到

文本alignment

 <td class='alnright'>text to be aligned to right</td> <style> .alnright { text-align: right; } </style> 

Answer 2

现在对我有效的是：

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 3

不要忘了CSS3的“n-child”select器。 如果您知道要将文本alignment的列索引，则可以指定

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

在大桌子的情况下，这可以为您节省很多额外的标记！

这是一个雅的小提琴…. https://jsfiddle.net/w16c2nad/