Question

我知道这个问题已被要求死亡，但我找不到类似的案例。我有一个HTML表格，“th”行的文本通过vertical-align：bottom在底部对齐。现在，其中一个标题还包含一个我想要向右和向下浮动的按钮。所以当然，我用“float：right”将该按钮包裹在“span”中。但该列标题的文本不再触及容器的底部。

此处示例： http://jsfiddle.net/accelerate/3sqyw/

HTML：

<table>
    <th>Col 1</th>
    <th>Col 2<span class="right-float"><button>Button</button></span></th>
    <th>Col 3</th>
</table>

CSS：

.right-float {
    display: inline-block;
    float: right;
}

table, th {
    border: 1px solid #aaaaaa;
}

table th {
    text-align: left;
    vertical-align: bottom;
    width: 120px;
    height: 40px;
    padding: 0 10px;
}

如果我删除“float：right”，“Col 2”将正确对齐底部，但当然按钮不再右对齐。那么我需要做些什么来确保Col 2沿着底部与其余列对齐？

Answer 1

使用定位而不是浮动。

.right-float {
    position:absolute;
    bottom:0;
    right:0;
}

并在表格标题上设置相对定位（position:relative;上的<th>）。

<强> jsFiddle example

Answer 2

尝试调整按钮的height，您会发现标签也在调整。

.right-float
{
     display: inline-table;
     float: right;
     height: 20px;
}

带垂直对齐底部的HTML表格和右浮动的元素

2 个答案: