0

私はliのulメニューを持っています:

ここで JSFiddle: http://jsfiddle.net/uvkQp/

すべての行に 3 つのトップ アイテムがあり、その下にサブアイテムがあり、その下にサブアイテムがある 3 つのトップ アイテムがあります。トップアイテムのliの高さが常に均一であることを取得するにはどうすればよいですか(その中に最も多くのサブアイテムがある最大の高さ)。

HTML:

<ul class="menu">
    <li>
         <a href="#">Top item</a>
         <ul>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Top item</a>
         <ul>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Top item</a>
         <ul>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Top item</a>
         <ul>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Top item</a>
         <ul>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
             <li><a href="#">Subitem</a></li>
         </ul>
    </li>
</ul>

CSS:

#content{
float : left;
position : relative;
overflow : hidden;
padding : 0 28px 0 0;
width : 728px;
}

ul.menu,
ul.menu ul{
display : inline-block;
margin : 0;
padding : 0;
list-style : none;
width : 100%;
}

ul.menu li{
float : left;
font : 17px/1.0em open_sansbold;
margin : 0 0 0 28px;
color : #2780af;
text-transform : uppercase;
width : 224px;
}

ul.menu li:first-child,
ul.menu li:first-child + li + li + li + li {
margin : 0;
}

ul.menu li li{
font : 12px/1.0em open_sansregular;
margin : 0;
padding : 5px 0;
color : #777777;
text-transform : normal;
}

ul.menu li a, ul.menu li a:link, ul.menu li a:active, ul.menu li a:visited, ul.menu li a:hover {
display : block;
background : url(gfx/line-dotted.gif) repeat-x left bottom #FFFFFF;
margin : 0 0 5px;
padding : 0 0 11px;
color : #2780af;
text-decoration : none;
cursor : text;
}

ul.menu li li a, ul.menu li li a:link, ul.menu li li a:active, ul.menu li li a:visited {
display : block;
background : #FFFFFF;
margin : 0;
padding : 0;
color : #777777;
text-decoration : underline;
cursor : pointer;
}

ul.menu li li a:hover {
color : #000000;
text-decoration : none;
}
4

2 に答える 2

1

ここでフィドルを見つけてください。http://jsfiddle.net/ardeezstyle/aBUhJ/

ここにコードがあります

$(function(){
    maxH=0;
    $('.menu > li').each(function(){
        maxH = $(this).height() > maxH ? $(this).height() : maxH;
    })
    $('.menu > li').height(maxH);
});
于 2013-04-12T11:55:07.647 に答える
1

これが私の解決策です：

$("ul.menu > li:nth-child(3n+1)").css("clear","both");

これがより多くの人に役立つことを願っています:-)

于 2013-04-12T11:57:06.533 に答える