對齊導航欄中的內容

我需要對齊導航欄中的內容，以便即使語言正在更改並且字母更多/更少也能始終保持在同一位置，但我似乎無法做到這一點並且當語言改變整個酒吧休息時。對齊導航欄中的內容

它看起來像英文和它是如何應該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; 
}

來源

2015-01-03 Denki

能否請你展示一些代碼？看起來你需要在內容變化的元素上設置寬度 – sodawillow

哎呀，對不起。我完全忘了。 – Denki

如果你只是想讓它們內聯顯示，你可以擺脫你應用的'float'。 – Brian

當你有8個元素，你可以給他們一個12.5％的寬度，並且顯示設置爲僅高於內聯，如果你想改變，你將不得不設置寬度顯示阻止：

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

我不能對此進行測試，因爲我很想念你的代碼的其餘部分...

來源

2015-01-03 00:45:53 sodawillow

對齊導航欄中的內容

回答

相關問題