水平菜单/列表对齐问题

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，特别是在菜单中。这是访问和搜索引擎优化的重要部分。您应该花时间细化本节的标记（可能），而不是您网站的任何其他部分。

• 而不是使用线高度（可能会比较混乱，当你试图跨浏览器），试图填充和利润。