CSS Truc: Verspreid listitems over de breedte van de container

Menuitems in WordPress worden meestal in listitems weergegeven. Afhankelijk van het design wordt het menu of links uitgelijnd of worden de items gelijkwaardig verspreid over de breedte van de container. Beide manieren kun je via CSS makkelijk oplossen. Het verschil zit hem in de combinatie van het de float en de display waardes binnen de css statements.

Menuitems links uitlijnen

De css van dit links uitgelijnde menu is:

div.bgMenu{
    background-color:#458EAC;
    width:100%;
    border:1px solid #000;
    height:30px;
}
ul.itemsalignleft {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    color:#fff;
}
ul.itemsalignleft li {
    border-right:1px solid #000;
    display: block;
    float: left;
    text-align:center;
    padding:0 20px;
}

Menuitems gelijkwaardig over de hele breedte verspreiden

De css van dit gelijkwaardig menu is:

div.bgMenu{
    background-color:#458EAC;
    width:100%;
    border:1px solid #000;
    height:30px;
}
ul.itemsalignevenly{
    display: table;
    list-style-type: none;
    margin: 0;
    padding: 0;
    color:#fff;
    width:100%;
}
ul.itemsalignevenly li {
    border-right:1px solid #000;
    display: table-cell;
    float: none;
    text-align:center;
}
ul.itemsalignevenly li:last-child {
    border-right:none;
}