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

【问题标题】：how to set longest li element's width as width of all li elements that belong to single parent ul如何将最长 li 元素的宽度设置为属于单个父 ul 的所有 li 元素的宽度
【发布时间】：2011-08-09 13:27:35
【问题描述】：

我有一个这样的无序列表

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

当我mouseover home 时，home 下所有<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;}

【问题讨论】：

您不需要 jQuery 来执行此操作。基本 CS 可以做到这一点，但我们首先需要更多。 <li> 和 <ul> 元素本质上是块级的，所以如果没有更多的上下文，我们不会很有帮助。

标签： jquery css asp.net

【解决方案1】：

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

ul{
  float: left;
}

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

我知道这有点晚了，但这个答案让我发疯了，我一直在寻找这个简单的 sn-p。希望有人能帮忙。

【讨论】：

【解决方案2】：

你有不想用的理由吗

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

编辑：

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

我建议您使用众多免费的 CSS 下拉菜单生成器之一，至少作为基础，看看它们是如何工作的。我以前使用过并且可以推荐的一个是 http://purecssmenu.com/ 。这应该能让你正常工作。

【讨论】：

@bhargav -- 现在您已经添加了一些代码，我可以看到您的级别 1 ul.dropdown li 有 float:left，这将导致它缩小。为什么不在jsfiddle.net 上创建模型，然后我们可以为您修复它？
@simon 好的...我正在尝试将我的模拟放在链接中
@simon 我已经在 jsfiddle 中进行了编辑和检查，但是您如何获得该链接...我猜这是链接 jsfiddle.net/hJPmT/9
@bhargav -- 在 jsfiddle 中设置好后，单击“保存”并发布网址（在您的问题中）。然后我们可以分叉你的小提琴，并返回一个解决方案的链接:)
@simonn 我希望我能更清楚，如果我可以直接和你聊天。问题是厨房等孩子们也得到了他们周围的黑色背景。但我不知道它不是显示在那边...

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

如果你把float: left 样式<ul>，并让你的<li>s display: block，它们都应该是相同的宽度。

【讨论】：