如何在表格单元格 (td) 中定位元素，使一个元素左对齐，另一个右对齐？答案

【问题标题】：How can I position elements within a table cell (td) such that one element is left aligned and the other right aligned?如何在表格单元格 (td) 中定位元素，使一个元素左对齐，另一个右对齐？
【发布时间】：2012-08-27 20:07:57
【问题描述】：

给出下面的html代码：

<tr>
   <td>Some text <a href="">Some link</a> <button>Some Button</button></td>
</tr>

我想实现这样的目标：

我是否需要添加额外的标记，例如包装 div 以使一个向左浮动，另一个向右浮动？我还需要 td 中的元素垂直对齐。

以最少的额外加价实现这一目标的最佳方法是什么。

我这里有示例代码：http://jsfiddle.net/stormwild/AAw78/17/

一个相关的问题是，当一个单元格包含浮动元素时，如何保持表格单元格之间的文本对齐方式一致？

【问题讨论】：

如果我应用 td button { float: right; }，在 IE7/IE8/IE9 中，一些文本和一些链接向上移动，因此与其他表格单元格中的文本不对齐。有没有办法避免这种转变。

标签： html css html-table css-tables

【解决方案1】：

CSS：td button { float: right; }

已排序。

【讨论】：

在一个单元格中浮动元素的问题是，与其他单元格相比，它会使该单元格中的文本错位。
您可以为浮动元素添加任意边距（甚至是负边距）以纠正任何对齐问题。

【解决方案2】：

嗨，现在给你按钮中的浮动元素

<button style="float:right;">Some Button</button>

Demo

或

<button class="fr">Some button</button>

CSS

.fr{
float:right;
}

【讨论】：