居中使用CSS的宽度相等的表格式布局？

按钮的该行应该在网页
每个按钮应该是一样宽的最宽的按钮（即没有固定的/硬编码键宽度）上居中。

这很容易用<table>完成，但随着人们不断告诉我那些对你不好，我想知道这是否可以用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>

Clipped button caption

事实上，它看起来正确的在IE中，但不在Chrome和Firefox。这里是我的两个表 - 和CSS-尝试小提琴：

http://jsfiddle.net/kfwhpre8/

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

来源

2014-10-29 Sphinxxx

看你的小提琴，请记住，在表版本buttons包含在td秒。这是问题的实质。它出现在按钮上直接使用table-cell是有问题的。如果你不介意你的chaniging 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%; 
}

Fiddle

来源

2014-10-29 23:21:03

非常感谢，这工作！任何想法，如果可以做到这一点，而不指定每个按钮的百分比？ – Sphinxxx 2014-10-29 23:39:08

概率不是你要找的，你说你想摆脱的width:50%

如果设置在button-row button{}所有的按钮width:100%会一样宽，最宽的按钮

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

答案

来源

2014-10-29 22:46:45

这听起来像一个很好的答案，但你的链接去我原来的jsfiddle，所以我不能看到您的解决方案.. – Sphinxxx 2014-10-29 22:55:51

对不起，我的坏只是添加代码来改变我的答案。 – 2014-10-29 23:00:30

如果我这样做，第二个按钮放在第一个按钮下面，而不是并排放置。小提琴：http://jsfiddle.net/kfwhpre8/2/ – Sphinxxx 2014-10-29 23:05:14

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

至少在HTML的当前形式。

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

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

来源

2014-10-29 23:20:41 Ant

对不起，这正是我试图避免:) – Sphinxxx 2014-10-29 23:27:31

居中使用CSS的宽度相等的表格式布局？

回答

相关问题