在CSS中跨越整个父宽度的3个相等大小的链接？

Question

我有以下问题:我试图使3个链接/锚点(填充和边框X和边距0)具有相同的大小(或至少第一个和最后一个),并且它们的所有3个一起跨越100%父宽度.

无论我如何尝试它,它都没有远离跨浏览器(新的浏览器,而不是糟糕的IE7)所以我很好奇,如果有人在那里知道如何做到这一点

示例代码:

<style>
.menu{
  background : lightblue;
  width      : 320px;
  text-align : center;
}
.btn{
  display    : inline-block;
  background : #fff;
  border     : 1px solid #666;
  padding    : 5px 10px;
}
</style>

<div class="menu">
  <a href="#" id="btn1" class="btn">Btn1</a>
  <a href="#" id="btn2" class="btn">Btn2</a>
  <a href="#" id="btn3" class="btn">Btn3</a>
</div>

现在我尝试了从将它们添加到具有3列的表到设置的所有内容,box-sizing:border-box;但似乎没有任何效果

理想的结果是3个锚点的总宽度等于父宽度(320px)

Answer 1

这样的事怎么样？您可以将显示用作表css属性.你说你想要跨浏览器,但你没有说你需要支持哪些版本.

http://jsfiddle.net/9rwQY/3

.menu{
  display    : table;
  background : lightblue;
  width      : 320px;
  text-align : center;
}
.btn{
  display    : table-cell;
  width      : 33%;
  background : #fff;
  border     : 1px solid #666;
  padding    : 5px 10px;
}