Geek asks and answers

Stretching the ul-li menu with padding for full width

I have a menu floated ul / li (the), i.e. with a change in width, but I would like to fill the entire width of the containing div.

the code:

#main-content ul.jwts_tabbernav {  
    display: block;
    margin-bottom: 20px;
    text-transform: uppercase; 
    text-align: center; 
}

#main-content ul.jwts_tabbernav li a,
#main-content ul.jwts_tabbernav li a:link, 
#main-content ul.jwts_tabbernav li a:hover {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #734C2F; outline: 1px solid #734C2F;
    color: #734C2F;
    font-size: 12pt;
    font-weight: bold; 
    margin: 0;
    padding: 3px 35px;
}

development pages (with two different menu widths):

http://www.kaplareva.com/polarinvest/?p=224

http://www.kaplareva.com/polarinvest/?p=227

Any idea how this can be solved?

+3
source share
3 answers

The following changes will modify the list items to fill the container.

ul {
    display:table;
    width:100%;
}

li {
    display:table-cell;
}

a {
    display:block
}

: display: table-cell display: IE6/7, , , . IE6 7.1% IE7 2.54%, , .

+2

, , a li display: block:

#main-content ul.jwts_tabbernav li a,
#main-content ul.jwts_tabbernav li a:link, 
#main-content ul.jwts_tabbernav li a:hover {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #734C2F; outline: 1px solid #734C2F;
    color: #734C2F;
    font-size: 12pt;
    font-weight: bold; 
    margin: 0;
    padding: 3px 35px;
    display: block;
}
0

Install display unit

#menu a {
    display: block;
}
0
source

More articles:


All Articles