如何使按钮在表格下面居中对齐？

Question

我将表单元素放在表格中，以便列名和输入对齐到两列。 然后，我将提交按钮和取消按钮放在表格下方。 表格宽度不是固定的。 我想把按钮居中对齐到表格宽度。

一种简单的方法是将按钮放在表格中。 但我想将它们与表格分开。 最优雅的方法是什么？

- Sam Kong

Answer 1

类似这样的结构：

<div>
<!-- Your table -->
<table />
<!-- Your buttons -->
<div style="text-align:center;">
<input />
</div>
</div>

- Dimi Takis

---

那行不通：一个 DIV 会跨越可用的最大宽度，而表格则不会。 - Jan M

哦，好吧 - 直接说 => "绝对正确和错误的陈述" :) -- 通过使用您选择的HTML编辑器很容易进行测试 --- 只需使用一些属性扩展我的提供的片段以可视化对象边界 ---- `<div><!-- Your table --> <table width="100px;" border="1 1 1 1 solid green"> <tr><td>bla</td></tr> </table> <!-- Your buttons --> <div style="text-align:center;border-width: 1px; border-color:red; border-style:solid;"> <input type="submit" /><input type="submit" /><input type="submit" /> </div> </div>` 简短回答：表格结束后跟随换行符。 - Dimi Takis

Answer 2

因为按钮和表格相关，您可以使用一个字段集：

<fieldset>
<!-- Your table -->
<table />
<!-- Your buttons -->
<p style="text-align:center;">
<input />
</p>
</fieldset>

- Steve