html - 将按钮放在表格上方，与表格右侧对齐

Question

如何将按钮放置在右对齐的表格上方？

想象一条假想的垂直线放置在表格的右侧。我希望将按钮的右限制放置在该行所在的位置。这是草稿:

如您所见，按钮与表格对齐，但不属于表格。
表格的大小设置为自动。
我已经尝试使用 div 作为包装器，但没有成功。不工作。还有其他选择吗？

补充:我忘了:表格应该是左对齐的。

Answer 1

只需使用以下 CSS 在两者周围添加一个 div 包装器即可:

display: inline-block; 
text-align: right;

jsFiddle Demo

• 我的解决方案假设按钮不是block，在这种情况下您还必须 float 它(text-align 不会影响它)。

• display: inline-block; 不能在 IE7 上运行，但是 there is a hack .

小解释:

display: inline-block; 是这个解决方案的核心。它使容器占用其子项的宽度，在本例中可能是 table(但如果按钮更大则没有问题)。