導航間距填充問題

Question

我正在構建一個導航位置，儘管我用填充操縱，但我無法在我的子菜單之間創建相等的距離。這有點難以描述，所以我在這裏創建了一個jsfiddle：http://jsfiddle.net/kCXrX/

如果有人有秒，你可以讓我知道爲什麼，當你將鼠標懸停在元素上時，行項之間的距離不一樣 - 有左側比右側更大的距離

任何指導讚賞！

Answer 1

我已經分叉的提琴在這裏：http://jsfiddle.net/tLzST/1/

你的HTML是無效的，UL可以不UI的直接孩子，所以我已經把內LIS你.submenu名單。一種或兩種風格的調整也是如此。

Answer 2

我已經加入了ul.subnav {border-left: solid 1px transparent;padding: 0 5px 10px 0;}，現在它看起來更適合我。

Answer 3

只是因爲使用內聯塊纔出現額外的填充。嘗試刪除此屬性（display:inline-block）並將其替換爲float:left。 現在，是時候調整.navigation，以便通過添加overflow:hidden;來強制包含subnav（浮動問題）。 我已經編輯你的小提琴，看看它。 http://jsfiddle.net/kCXrX/

Answer 4

在ul.subnav改變你的填充，以這樣的：padding: 0 5px 10px 1px;

如果你做你的桌子上一個CTRL-A，你會看到你border-right行實際上已經似乎是自動添加到自己一個3像素填充。如果考慮到這個填充，你的代碼實際上可以正常工作。 在任何情況下繼承人新的jsfiddle：http://jsfiddle.net/kCXrX/5/

Answer 5

如果橙色懸停左&右白色間距差異是問題，請檢查以下代碼。

 
    ul.subnav { 
     border-right: solid 1px; 
     display: inline-block; 
     height: 80px; 
     padding: 0 5px 10px 1px; 
     vertical-align: top; 
     width: 116px; 
    }