我需要一种方法来填充链接左侧和右侧的空白区域

Question

我需要自动填充菜单链接旁边的空间。 我的菜单栏链接数量未知。

我需要一种看起来与链接完全一样的方式来填充链接旁边的空白区域。

如果您看一下我的小提琴，您会看到有绿色和黑色链接分类：a.menu（绿色）和a.menu_filler（黑色）。 我将它们设置为“绿色”和“黑色”以使其清晰可见，最后我要谈论的链接将具有相同的背景。

我需要a.menu_filler（black）链接进行自我调整，以适应称为div.navbar（银）的导航条div的剩余宽度的100％。

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

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

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

码

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

div.navbar > a{
  display: table-cell;  
}

演示： http : //jsfiddle.net/nWzqc/

Answer 2

添加display: table-cell; 到a并从div.navbar删除高度。

演示