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;
}
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;
}
Add display: table-cell;
to a
and remove height from div.navbar
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.