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％的宽度，并且当显示设置为刚好在上面时，如果你想改变宽度，你必须将显示设置为阻止：

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

我无法测试这个，因为我错过了你的其余代码...

对齐导航栏中的内容

1 个答案: