How to display navigation tabs with the desired border? Table, list, something else?

Diagram

See picture above. Each navigation tab should have a separation of 2 pixels on each side and exactly match the header image at the edges.

Now they would like to introduce the 5th navigation tab (and possibly the 6th). Is it possible to code this so that you can insert the 5th or 6th tab there, and everything will be changed accordingly using lists or tables or another solution? Still maintaining 2-pixel separation and fine-tuning the edges? I was not sure if this was possible, or you would just need to determine the width each time for each tab, based on the math involved in aligning everything correctly with the edges.

+3
source share
3

, - CSS. , - .

ul {
    display:table;
}
li {
    display:table-cell;
}

, CSS . , . IE < 8 CSS, -, .

: : IE6 7 . , . javascript display, .

EDIT: , , , , :first-child , . http://jsfiddle.net/wesley_murch/pe6wd/3/

+1

. css . , . , .

0

LESS SASS, CSS?

0

All Articles