0

我有一个问题，我还没有找到解决方案。我有一个非常简单的菜单：jsfiddle

如您所见，由于 padding-top，第一个项目位于中间，现在这很好，但其余项目有 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>

​</p>

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; }

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

4

2 回答 2

0

没有办法给出纯CSS 解决方案。但你可以做点什么。

案例一：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;}
于 2012-11-11T16:31:09.910 回答
0

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

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

如果您不想让项目分布在页面的整个宽度上，请使<ul>元素更小。

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

于 2012-11-11T16:43:55.787 回答