html - 对齐导航栏中的内容

Question

我需要对齐导航栏中的内容，以便它们始终保持在同一个位置，即使语言在变化并且有更多/更少的字母但我似乎无法做到这一点并且当语言发生变化时整个酒吧都坏了。

它在英语中的样子以及它应该如何对齐: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% 的宽度，并且显示设置为内联就在上面，如果你想改变宽度，你必须将显示设置为 block :

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

我无法对此进行测试，因为我缺少您的其余代码...