Выровнять содержимое в навигационной панели

Question

Мне нужно выровнять содержимое в панели навигации, чтобы они всегда могли оставаться в одном и том же месте, даже если язык меняется, и есть больше/меньше букв, но я не могу это сделать и когда язык изменяется, весь бар разбивается.

Как это выглядит на английском языке, и как это должно Allign: http://i.imgur.com/URnA2em.png Как это выглядит на нидерландском языке, когда есть больше писем: http://i.imgur.com/ZwPKXAF.png

Любые идеи, как это исправить?

Код:

div#sitenav { 
    background: #303030; 
    display: block; 
    width: 100%; 
    float: left; 
    max-height: 52px; 
    margin: 0 0 15px 0; 
} 

div#sitenav ul, 
div#sitenav li { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: inline; 
} 

div#sitenav ul li { 
    float: left; 
    position: relative; 
} 

div#sitenav ul li a { 
    display: inline-block; 
    color: #fff; 
    text-decoration: none; 
    font-size: 13px; 
    font-weight: 500; 
    padding: 17px 25px; 
} 

div#sitenav ul li a:hover, ul#main_nav_left li a:hover { 
    background: #2db2ea !important; 
    color: #fff; !important; 
    -webkit-transition: all 0.1s ease-in-out; !important; 
    -moz-transition: all 0.1s ease-in-out; !important; 
    -o-transition: all 0.1s ease-in-out; !important; 
    -ms-transition: all 0.1s ease-in-out; !important; 
    transition: all 0.1s ease-in-out; !important; 
} 

div#sitenav ul:nth-child(1) li:nth-child(1) a, div#sitenav ul:nth-child(2) li:nth-child(1) a, div#sitenav ul:nth-child(2) li:nth-child(2) a, div#sitenav ul:nth-child(2) li:nth-child(3) a, div#sitenav ul:nth-child(2) li:nth-child(4) a { 
    background: url(../css/images/navigation-divider.png) no-repeat right 50%; 
} 

div#sitenav ul:nth-child(2) li:nth-child(1), div#sitenav ul:nth-child(3) li { 
    padding-left: 5.486em; 
} 

div#sitenav ul:nth-child(3) li a { 
    background-color: #4ea09c; 
} 

Answer 1

Как у вас есть 8 элементов, вы можете дать им ширину в 12,5%, а в качестве дисплея установлен встраивать чуть выше, если вы хотите изменить ширину, вы должны будете установить дисплей блокировать:

div#sitenav ul li { 
    display: block; 
    float: left; 
    position: relative; 
    width: 12.5%; 
} 

Я не могу проверить это, как я пропускаю остальную часть кода ...