水平菜單/列表對齊問題

Question

這是我第一篇文章，以stackoverflow，但我用你們知識不斷，所以謝謝！

我遇到菜單對齊問題。我有一個wordpress菜單，我在li元素中添加了div，這樣我就可以爲每個菜單設置第一個/中間/最後一個元素。這樣我就可以使當前的菜單狀態與第一個和最後一個項目成爲「endcaps」。很難解釋，你可以在這裏看到：http://clarksvillevet.com/new/

請注意當前菜單項目的中間是如何「下沉」？我無法弄清楚我在這裏錯過了什麼。我認爲這是線的高度，但只是移動它一點。我猜測在css上有些東西是重疊的（如果你知道我的意思，有點兒叫它兩次），但是，不知道。下面是生成的HTML：

<div id="main-menu"> 
<ul id="menu-main-menu" class="menu"> 
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"> 
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-23"> 
<div class="first"></div> 
<div class="middle"> 
<a href="http://clarksvillevet.com/new/about-southside-va-veterinary-hospital/" title="About Southside Virginia’s Best Veterinary Hospital">About</a> 
</div> 
<div class="last"></div> 
</li> 
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"> 
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"> 
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"> 
<li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"> 
</ul> 
</div> 

而CSS

#main-menu{ 
width: 598px; 
height: 51px; 
margin: -6px 0px 0px; 
z-index:401; 
float: left; 
background:url('images/BG-Menu.png') no-repeat top left transparent; 
} 

.menu { 
list-style-type:none; 
list-style-position:outside; 
list-style-image:none; 
position:relative; 
z-index:300; 
width: 598px; 
height: 51px; 
float: left; 
line-height: 57px; 
} 

.menu ul{ 
position:absolute; 
line-height: 57px; 
overflow:hidden; 
margin:0px; 
padding:0px; 
top: 51px; 
left:0px; 
display: none; 
list-style-position:outside; 
} 

.menu a { 
display:block; 
display:inline-block; 
padding:0px; 
text-decoration:none; 
letter-spacing: 1px; 
font-size: 13px; 
color: #dddddd; 
margin: 0px; 
} 

.menu .first, .menu .middle, .menu .last { 
position: relative; 
padding:0px; 
display: inline-block 
} 

.menu .first, .menu .last{ 
width: 11px; 
height: 51px; 
margin: 0px; 
padding: 0px; 
} 

.menu .middle { 
height:51px; 
margin: 0px; 
padding: 0px; 
} 

.menu a:hover { 
color:#ffffff; 
background-color:transparent; 
} 

.menu li { 
float:left; 
position:relative; 
} 


.menu ul a:hover { 
color:#ffffff; 
} 

.menu li ul a { 
width: 250px; 
height: 32px; 
float:left; 
line-height: 30px; 
background: url('images/BG-Drop-Menu.png') no-repeat top left transparent; 
padding: 0px 0px 0px 20px; 
color: #ffffff; 
} 

.menu li ul a:hover{ 
background: url('images/BG-Drop-Menu-Hover.png') no-repeat top left transparent; 
} 

.menu li ul ul { 
left:0em; 
margin:0px 0 0 10px; 
} 

.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul { 
display:none; 
} 

.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{ 
display:block; 
} 

.current-menu-item .first{ 
background:url('images/BG-Menu-Current-A.png') no-repeat top left transparent; 
} 

.current-menu-item .middle{ 
background:url('images/BG-Menu-Current-B.png') repeat-x top left transparent; 
} 

.current-menu-item .last{ 
background:url('images/BG-Menu-Current-C.png') no-repeat top left transparent; 
} 

.current-menu-item{ 
line-height: 51px; 
} 

還有一個下拉菜單，所以當你看到。菜單UL顯示：沒有，那是爲了什麼呢？它隨時糾正你可能看到的任何瘋狂！謝謝！

Answer 1

所有孩子divs都是內聯塊。發生這種情況時，如果包含文本，則會應用行高。要解決這個問題，你需要漂浮divs，如下所示。

.menu ul > div { float: left } 

Answer 2

如果你既浮動。先和.middle左（浮動：左），這將解決當前的問題。

但我覺得你的菜單切分不僅僅是這個問題。這裏有幾件事要看：

• 你有一個.middle和.last。爲什麼不只是擁有.first和.last，而你的.last具有.middle和.last的背景圖像？爲了容納其他菜單項，它將不得不稍長一些，但這意味着只能加載2張圖片。

• 儘量避免空的div，特別是在菜單中。這是訪問和搜索引擎優化的重要部分。您應該花時間細化本節的標記（可能），而不是您網站的任何其他部分。

• 而不是使用線高度（可能會比較混亂，當你試圖跨瀏覽器），試圖填充和利潤。