html - 将 float:right 样式应用于按钮会弄乱其与相邻文本的垂直对齐方式

Question

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

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

这是应用了 float:right 的 jsfiddle：http: //jsfiddle.net/5GRHL/3/

score 2 · Accepted Answer

我相信最简单的解决方案是为您的按钮设置一个固定的高度，并将该高度作为文本的行高应用。像这样的东西：

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

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

score 1 · Accepted Answer

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

尝试类似：

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

score 0 · Accepted Answer

0

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

于 2012-08-28T17:33:14.883 回答

3 回答 3