我需要一种方法来填补空白的空间在左边和右边的链接

Question

我需要自动填充菜单链接旁边的空白。我有一个未知数量的链接，构成一个菜单栏。

我需要一种方法来填充链接旁边的空白空间，使其看起来与链接完全相同。

如果你看一下我的小提琴，你会看到有绿色和黑色的链接分类:.menu(绿色)和.menu_filler(黑色)。我将它们设置为绿色和黑色，以使我所谈论的链接最终具有相同的背景。

我需要a.menu_filler(黑色)链接自我调整到导航栏div的剩余宽度的100%，称为div.navbar(银色)。

http://jsfiddle.net/RFZees/Gt4SG/6/

我希望我的解释是可以理解的。HTML:

<div class='navbar'> 
 <a class='menu_filler'></a>
 <a class='menu' href='#'>LINK</a>
 <a class='menu' href='#'>BIGGER LINK</a>
 <a class='menu' href='#'>BIGGEST LINK</a>
 <a class='menu_filler'></a>
</div>

CSS:

div.navbar {
    background:silver;
    height:50px;
    width:600px;
    margin:auto;
    text-align: center;
}
a.menu_filler {
    background:black;
    height:30px;
    width:auto;
    padding:10px;
    margin:5px;
}
a.menu {
    background:green;
    height:30px;
    padding:10px;
    margin:5px;
    color:blue;
}
a.menu:hover {
    background:blue;
    color:green;
}

Answer 1

您可以在.navbar中使用display: table;和border-spacing: 10px;，然后将每个<a/>元素声明为display:table-cell;。

这样填充物将自动计算，div之间的间距将自动调整，并且它们将是透明的。

代码

div.navbar {
    /* all your stuff */
    display: table;
    border-spacing: 10px;
}
div.navbar > a{
  display: table-cell;  
}

DEMO: http://jsfiddle.net/nWzqc/

Answer 2

添加display: table-cell;到a，并移除div.navbar的高度。