1

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

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

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

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

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;
}
4

2 回答 2

5

您可以在 .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;  
}

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

于 2013-04-11T12:52:08.503 回答
-4

display: table-cell;在中添加a和删除高度div.navbar。

演示

于 2013-04-11T13:08:41.200 回答