使用CSS,使用相等宽度的列居中的表格式布局?

时间:2014-10-29 22:19:39

标签: html css html-table css-tables

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

  • 此行按钮应位于页面的中心
  • 每个按钮应与最宽的按钮一样宽(即没有固定/硬编码的按钮宽度)。

这可以通过<table>轻松完成,但是当人们不断告诉我那些对你不好的时候,我想知道是否可以用CSS来完成。所以,我尝试了display: tabletable-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>

Clipped button caption

实际上,它在IE浏览器中看起来是正确的,但在 Chrome和Firefox 中看起来不正确。这是我的表和CSS尝试的小提琴:

http://jsfiddle.net/kfwhpre8/

如果可能,我想摆脱width: 50%设置,因为按钮的数量可能会有所不同,但这很容易计算。

3 个答案:

答案 0 :(得分:1)

注意你的小提琴,请记住,在buttons页中,td中包含table-cell。这是问题的实质。在按钮上使用<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%; } 似乎直接出现问题。如果您不介意浏览HTML,可以尝试:

{{1}}

Fiddle

答案 1 :(得分:0)

不是你正在寻找的答案,因为你说你要摆脱width:50%

如果您在width:100%中设置button-row button{},则所有按钮都会与最宽按钮一样宽

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

答案 2 :(得分:0)

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

至少在HTML的当前形式中。

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

小提琴:http://jsfiddle.net/kfwhpre8/3/