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

无法提供纯粹的 CSS解决方案。但你可以做点什么。

案例1：JavaScript

找到最高元素，将高度应用于所有元素。你可以这样做：

var maxHeight = Math.max.apply(null, $("#menu li").map(function ()
{
    return $(this).height();
}).get());

案例2：CSS

提供nowrap和ellipsis。

.menu a span {width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

Answer 2

您可以制作商品display: table-cell;和商品table-row。然后设置vertical-align: middle;属性：

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

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

修改：您还可以将min-width或width设置为<li>元素以使其更大。虽然这样菜单可能比页面本身更宽：http://jsfiddle.net/qsESh/2/

CSS菜单 - 两行应删除填充

2 个答案:

案例1：JavaScript

案例2：CSS