0

まだ解決策を見つけていない問題があります。私は非常に単純なメニューを持っています: jsfiddle

ご覧のとおり、最初のアイテムはパディングトップにより中央に配置されていますが、これで問題ありませんが、残りのアイテムには 2 つの行があるため、パディングによってそれらが押し下げられています。

「アイテムに2行ある場合、パディングトップを削除する」ことを定義する方法はありますか?

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 Solutionを提供する方法はありません。しかし、あなたは何かをすることができます。

ケース 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;}
于 2012-11-11T16:31:09.910 に答える
0

display: table-cell;アイテムと親を作成できますtable-row。次に、vertical-align: middle;プロパティを設定します。

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

ページの幅全体にアイテムを広げたくない場合は、<ul>要素を小さくします。

編集:要素にmin-widthまたはwidthを設定して、<li>要素を大きくすることもできます。このように、メニューはページ自体よりも広い場合があります: http://jsfiddle.net/qsESh/2/

于 2012-11-11T16:43:55.787 に答える