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

Question

I need to auto fill spaces next to menu links. I have a unknown number of links that make up a menu bar.

I need a way to fill in the empty space next to the links in a way that it looks exactly like the link.

If you have a look at my fiddle you will see there are green and black links classed: a.menu(green) and a.menu_filler(black). I set them Green and Black to make it obvious which links I am talking about in the end they will have the same background.

I need the a.menu_filler(black) links to self adjust to 100% of the remaining width of the navbar div called div.navbar (silver).

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

I hope my explanation is understandable.

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

You can use display: table; and border-spacing: 10px; in .navbar, and then declare every <a/> element as display:table-cell; .

This way the fillers will be automatically calculated, the space between divs will be auto-adjusted, and they will be transparent.

Code

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

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

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

Answer 2

Add display: table-cell; to a and remove height from div.navbar .

Demo