Question

我有一个像这样的无序列表

<ul class="dropdown">Home
    <li>Kithchen</li>
    <li>Meeting room</li>
    <li>Garden</li>
</ul>

当我在家中mouseover时，归属于家中的所有<li>元素的宽度应该是最长元素的宽度。例如，这里的“会议室”时间最长。

我需要使用'jQuery'

来做到这一点

提前致谢

我为菜单编写的CSS文件就像这样

ul                          { list-style: none;}

/* 
    LEVEL ONE
*/
ul.dropdown                 {text-align:left; position:relative;z-index:1; width:1000px;}
ul.dropdown li              { font-weight: bold;border:1px solid green; float:left;color:white;background: black;width:100% }
ul.dropdown a:hover         { color: white; }
ul.dropdown a:active        { color: white; }
ul.dropdown li a            { text-align:left; display:inline; padding:4px; color:white;}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li:hover        { background: orange; color: white; position:relative; }
*                           { margin: 0; padding: 0; }

/* 
    LEVEL TWO
*/
.dropdown ul                { width: 220px; visibility:hidden; position:absolute;  left: 0; }
ul.dropdown ul li           { font-weight: normal; background:black; color: white; float:left; }

                            /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a         {color:White; border-right: none; width:180px; display: inline-block; } 

/* 
    LEVEL THREE
*/
ul.dropdown ul ul           { left: 100px; top: 0; }
ul.dropdown li:hover > ul   { visibility: visible;}

Answer 1

你有什么理由不想使用

ul.dropdown li { display: block; width: 100%; }

...

修改

感谢jsfiddle链接，但您设置的演示目前无效。

我建议您使用众多免费的css下拉菜单生成器之一，至少作为基础，看看它们是如何工作的。我之前使用的一个可以推荐的是http://purecssmenu.com/。那会让你顺利进行。

Answer 2

尽可能避免使用Javascript进行显示。我认为你可以使用严格的CSS来解决这个问题。

如果您设置float: left样式<ul>并制作<li> s display: block，则它们的宽度应相同。

Answer 3

var max = 0;
$("ul.dropdown li").each(function(){
  if($(this).width() >= max ){
     max  = $(this).width();
  }
});

$("ul.dropdown li").width(max);

Answer 4

我自己遇到了问题，只需使用这个CSS：

ul{
  float: left;
}

ul li {
  display: block; 
  width: 100%;
}

我知道它有点晚了，但这个答案让我疯狂，我为这个简单的片段永远搜索。有人会帮助这个。

如何将最长li元素的宽度设置为属于单个父元素ul的所有li元素的宽度

4 个答案: