html - CSS 菜单 - 两行应该删除填充

Question

我有一个问题尚未找到解决方案。我有一个非常简单的菜单:jsfiddle

如您所见，由于顶部填充，第一个元素在中间居中，现在这很好，但其余元素有 2 行，因此填充将它们向下推。

有没有办法定义“如果该元素有 2 行，则删除 padding-top”？

HTML:

<div class="menu">
<ul class="foldoutmenu">
<li class="current menuitem1 firstitem "><a href="/angsthaantering.aspx"><span class="foldoutmenu_title">Angsthåntering</span></a></li>
<li class="menuitem2 "><a href="/haandter-din-depression.aspx"><span class="foldoutmenu_title">Håndter din depression</span></a></li>
<li class="menuitem3 "><a href="/laer-at-leve-med-adhd-som-voksen.aspx"><span class="foldoutmenu_title">Lær at leve med ADHD som voksen</span></a></li>
<li class="menuitem4 "><a href="/styr-din-spiseforstyrrelse.aspx"><span class="foldoutmenu_title">Styr din spiseforstyrrelse</span></a></li>
<li class="menuitem5 lastitem "><a href="/personlig-udvikling-via-musik-og-kunst.aspx"><span class="foldoutmenu_title">Personlig udvikling via musik og kunst</span></a></li>

CSS:

.menu, .menu ul { float: left; width: 100%; background: #464646; height: 41px; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.menu ul { margin: 0; padding: 0; }
.menu a { color: #e4e4e4; text-decoration: none; font-weight: bold; font-size: 18px; }
.menu li { float: left; margin: 0px; padding:10px 10px 0 10px; width:170px; height:32px; border-right: 1px solid #000; list-style-type: none; }
.menu li ul { position: absolute; left: -999em; top:42px; left:0; }
.menu li:hover ul { left: 0; }

.menu ul li.current a { text-decoration:none; }
.menu ul li.current { background:#c1001f; }

我/希望我的问题足够清楚。

Answer 1

您可以制裁剪品 display: table-cell;和 parent table-row .然后设置 vertical-align: middle;属性:

http://jsfiddle.net/qsESh/1/

如果您不希望元素分布在整个页面宽度上，请将 <ul>元素更小。

编辑:您还可以设置 min-width或 width到 <li>使它们变大的元素。虽然像这样菜单可能比页面本身更宽:http://jsfiddle.net/qsESh/2/