0

这是我在 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;
}

还有一个下拉菜单，所以当您看到 .menu ul display:none 时，这就是它的用途...随时纠正您可能看到的任何疯狂！谢谢！

4

2 回答 2

0

所有的孩子divs都是内联块。发生这种情况时，如果 line-height 包含文本，则将应用它。要解决这个问题，您需要divs像下面那样浮动。

.menu ul > div { float: left }
于 2012-12-18T00:19:02.233 回答
0

如果将 .first 和 .middle 都向左浮动（float: left;），这将解决当前的问题。

但我觉得你的菜单切割不仅仅是这个问题。这里有几件事要看：

  • 你有一个 .first .middle 和 .last。为什么不只是有一个 .first 和 .last，而您的 .last 有一个 .middle 和 .last 组合的背景图像？容纳您的其他菜单项需要更长的时间，但这意味着只加载了 2 张图像。

  • 尽量避免空 div，尤其是在您的菜单中。这是可访问性和 SEO 的重要部分。您应该花时间（可能）比网站的任何其他部分更多地改进该部分的标记。

  • 不要使用行高（尝试跨浏览器时可能会感到困惑），而是尝试填充和边距。

于 2012-12-18T00:22:58.653 回答