Question

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

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

如果您看一下我的小提琴，您会看到有绿色和黑色链接分类： a.menu（绿色）和a.menu_filler（黑色）。我将它们设置为绿色和黑色，以便明确说明哪些链接我们将具有相同的背景。

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

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

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移除身高。

<强> Demo

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

2 个答案: