Html 使用CSS以表格为中心，列宽度相等的布局？

在网页上，我有一行提交按钮

• 这一行按钮应位于页面中央
• 每个按钮应与最宽的按钮一样宽（即没有固定/硬编码的按钮宽度）

使用

很容易做到这一点，但当人们不断告诉我这些对你有害时，我想知道是否可以用CSS来代替。因此，我尝试了

display:table

和

table cell

CSS类，但是按钮的宽度不相等，或者最长按钮的标题被剪裁：

.button-row {
    display: table;
    margin: auto;
    table-layout: fixed;
}
.button-row button {
    white-space: nowrap;
    display: table-cell;
    width: 50%;
}

<div class="button-row" >
    <button>Short caption</button>
    <button>A much longer caption</button>
</div>

。按钮行{
显示：表格；
保证金：自动；
表布局：固定；
}
.按钮行按钮{
空白：nowrap；
显示：表格单元格；
宽度：50%；
}
简短标题
长得多的标题

实际上，它在IE中看起来是正确的，但在Chrome和Firefox中却不正确。下面是我对表格和CSS的尝试：

---

如果可能的话，我想去掉

宽度：50%

设置，因为按钮的数量可能不同，但这很容易计算。

这不是你想要的答案，因为你说你想去掉

宽度：50%

如果在

按钮行按钮{}

中设置

宽度：100%

，则所有按钮的宽度将与最宽的按钮相同

.button-row button {
   display: table-cell;
   width: 100%;
}

---

我不确定这是否足够，因为每次添加新按钮时，您都必须检查它们的最佳尺寸。但您可以简单地为每个按钮添加一个宽度和一个边距，以复制表格布局

至少在HTML的当前表单中

.button-row button {
    display: table-cell;
    width: 150px;
    margin: 1px;
}

---

小提琴：

看着小提琴，请记住，在表格版本中，

按钮包含在
td
s中。这是问题的本质所在。直接在按钮上使用
表格单元格
似乎有问题。如果您不介意更改HTML，可以尝试：

<div class="button-row">
    <div>
        <button>Short caption</button>
    </div>
    <div>
        <button>A much longer caption</button>
    </div>
</div>


.button-row {
    display: table;
    margin: auto;
    table-layout: fixed;
}

.button-row>div {
    display: table-cell;
    width: 50%;
}

.button-row button {
    width:100%;
}


简短标题
长得多的标题
.按钮行{
显示：表格；
保证金：自动；
表布局：固定；
}
.按钮行>div{
显示：表格单元格；
宽度：50%；
}
.按钮行按钮{
宽度：100%；
}

这听起来是个不错的答案，但您的链接指向我原来的JSFIDLE，因此我看不到您的解决方案。对不起，我的bad将在我的答案中添加要更改的代码。如果我这样做，第二个按钮将放在第一个按钮的下方，而不是并排放置。小提琴手：对不起，这正是我想要避免的：）非常感谢，这很有效！你知道在不指定每个按钮的百分比的情况下是否可以这样做吗？