将float：right样式应用于按钮会使其与相邻文本的垂直对齐变得混乱

Question

我想在表格单元格中放置一个文本和按钮。按钮需要与右侧对齐。如果我将float：right样式应用于按钮，则垂直对齐会变坏。有什么帮助吗？

这里是没有浮动的jsfiddle：右边，垂直对齐在这里很好： http://jsfiddle.net/5GRHL/2/

这是jsfiddle with float：正确应用： http://jsfiddle.net/5GRHL/3/

Answer 1

我认为最简单的解决方案是为按钮设置固定高度，并将相同高度作为行高应用于文本。像这样：

td
{
    height:50px;
    width:80px;
    vertical-align:middle;
    line-height: 22px;
}
td button 
{
    float:right;
    height: 22px;
}

我更新了小提琴：http://jsfiddle.net/5GRHL/26/

Answer 2

我认为最简单的解决方案（但可能不是最干净的）是重新调整按钮。

尝试类似：

button {
  margin-top: -4px;
  float: right
}

Answer 3

您可以使用float：right并使用定位更正对齐：http://jsfiddle.net/5GRHL/23/